Я не хочу наследовать непрозрачность ребенка от родителя в CSS

Я не хочу наследовать непрозрачность дочернего элемента от родительского в CSS.

У меня есть один div, который является родителем, и у меня есть другой div внутри первого div, который является ребенком.

Я хочу установить свойство opacity в родительском div, но я не хочу, чтобы дочерний div наследовал свойство opacity.

Как я могу это сделать?

Вместо использования прозрачности установите цвет фона с помощью rgba, где «a» - уровень прозрачности.

Так что вместо:

background-color: rgb(0,0,255); opacity: 0.5;

использование

background-color: rgba(0,0,255,0.5);

Непрозрачность на самом деле не наследуется в CSS. Это пост-рендеринг группового преобразования. Другими словами, если<div> имеет установленную непрозрачность, вы визуализируете div и все его дочерние элементы во временный буфер, а затем объединяете весь этот буфер в страницу с заданной настройкой непрозрачности.

Что именно вы хотите сделать здесь, зависит от того, какой именно рендеринг вы ищете, что не ясно из вопроса.

Как уже упоминалось в этом и других подобных потоках, лучший способ избежать этой проблемы - использовать RGBA / HSLA или использовать прозрачный PNG.

Но если вам нужно нелепое решение, подобное тому, которое указано в другом ответе в этой теме (который также является моим веб-сайтом), вот новый скрипт, который я написал, который автоматически решает эту проблему и называется thatsNotYoChild.js:

http://www.impressivewebs.com/fixing-parent-child-opacity/

В основном он использует JavaScript, чтобы удалить все дочерние элементы из родительского элемента div, а затем переместить дочерние элементы туда, где они должны быть, фактически не являясь дочерними элементами этого элемента.

Для меня это должно быть последним средством, но я подумал, что было бы интересно написать что-нибудь, что сделало бы это, если кто-то захочет это сделать.

Небольшая хитрость, если ваш родитель прозрачен, и вы хотите, чтобы ваш ребенок был таким же, но определенным исключительно (например, для перезаписи стилей агента пользователя в раскрывающемся списке выбора):

.parent {
     background-color: rgba(0,0,0,0.5);
}

.child {
     background-color: rgba(128,128,128,0);
}

Непрозрачность дочернего элемента наследуется от родительского элемента.

Но мы можем использовать свойство css position для достижения наших целей.

Текстовый контейнерный div может быть помещен вне родительского div, но с абсолютным позиционированием, проецирующим желаемый эффект.

Идеальное требование ------------------ >>>>>>>>>>>>

HTML

            <div class="container">       
              <div class="bar">
                  <div class="text">The text opacity is inherited   from the parent div    </div>
              </div>
            </div>

CSS

               .container{
                position:relative;
                                   }
           .bar{
               opacity:0.2;
               background-color:#000;
               z-index:3;
               position:absolute;
               top:0;
               left:0;
              }

              .text{
                color:#fff;

               }

Вывод:--

Текст не виден, потому что наследует непрозрачность от родительского div.

Решение ------------------- >>>>>>

HTML

       <div class="container">  
         <div class="text">Opacity is not inherited from parent div "bar"</div>
         <div class="bar"></div>
       </div>

CSS

               .container{
                position:relative;
                                   }
           .bar{
               opacity:0.2;
               background-color:#000;
               z-index:3;
               position:absolute;
               top:0;
               left:0;
              }

              .text{
                color:#fff;
                z-index:3;
                position:absolute;
               top:0;
               left:0;  
               }

Вывод :

Текст виден с тем же цветом, что и фон, потому что div не находится в прозрачном div

Вопрос не определил, является ли фон цветным или графическим, но поскольку @Blowski уже ответил за цветной фон, есть взлом для изображений ниже:

background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url('image.jpg');

Таким образом, вы можете манипулировать цветом вашей непрозрачности и даже добавлять хорошие эффекты градиента.

.wrapper {
  width: 630px;
  height: 420px;
  display: table;
  background: linear-gradient(
    rgba(0,0,0,.8), 
    rgba(0,0,0,.8)), 
    url('http://cdn.moviestillsdb.com/sm/35bc3c6a2b791425de6caf8b9391026e/rambo-iii.jpg');
 }

h1 {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: #fff;
  }

<div class="wrapper">
<h1>Question 5770341</h1>
</div>

Кажется, что display: blockэлементы не наследуют непрозрачность отdisplay: inline родителей.

Пример Codepen

Может быть, потому что это неверная разметка и браузер тайно их разделяет? Потому что источник не показывает, что происходит. Я что-то пропустил?

Ответы выше кажутся мне сложными, поэтому я написал это:

#kb-mask-overlay { 
    background-color: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%; 
    z-index: 10000;
    top: 0; 
    left: 0; 
    position: fixed;
    content: "";
}

#kb-mask-overlay > .pop-up {
    width: 800px;
    height: 150px;
    background-color: dimgray;
    margin-top: 30px; 
    margin-left: 30px;
}

span {
  color: white;
}

<div id="kb-mask-overlay">
  <div class="pop-up">
    <span>Content of no opacity children</span>
  </div>
</div>
<div>
 <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae arcu nec velit pharetra consequat a quis sem. Vestibulum rutrum, ligula nec aliquam suscipit, sem justo accumsan mauris, id iaculis mauris arcu a eros. Donec sem urna, posuere id felis eget, pharetra rhoncus felis. Mauris tellus metus, rhoncus et laoreet sed, dictum nec orci. Mauris sagittis et nisl vitae aliquet. Sed vestibulum at orci ut tempor. Ut tristique vel erat sed efficitur. Vivamus vestibulum velit condimentum tristique lacinia. Sed dignissim iaculis mattis. Sed eu ligula felis. Mauris diam augue, rhoncus sed interdum nec, euismod eget urna.

Morbi sem arcu, sollicitudin ut euismod ac, iaculis id dolor. Praesent ultricies eu massa eget varius. Nunc sit amet egestas arcu. Quisque at turpis lobortis nibh semper imperdiet vitae a neque. Proin maximus laoreet luctus. Nulla vel nulla ut elit blandit consequat. Nullam tempus purus vitae luctus fringilla. Nullam sodales vel justo vitae eleifend. Suspendisse et tortor nulla. Ut pharetra, sapien non porttitor pharetra, libero augue dictum purus, dignissim vehicula ligula nulla sed purus. Cras nec dapibus dolor. Donec nulla arcu, pretium ac ipsum vel, accumsan egestas urna. Vestibulum at bibendum tortor, a consequat eros. Nunc interdum at erat nec ultrices. Sed a augue sit amet lacus sodales eleifend ut id metus. Quisque vel luctus arcu. 
 </p>
</div>

kb-mask-overlayэто ваш (непрозрачный) родитель, pop-upэто ваши (без непрозрачности) дети. Все ниже это остальная часть вашего сайта.

Не существует единого подхода, подходящего для всех, но одна вещь, которая мне показалась особенно полезной, это установка непрозрачности для прямых потомков div, кроме той, которую вы хотите сохранить полностью видимой. В коде:

<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
    <div class="child4"></div>
</div>

и CSS:

div.parent > div:not(.child1){
    opacity: 0.5;
}

Если у вас есть фоновые цвета / изображения для родителя, вы исправляете непрозрачность цвета с помощью rgba и background-image, применяя альфа-фильтры

Если вам нужно использовать изображение в качестве прозрачного фона, вы можете обойти его, используя псевдоэлемент:

HTML

<div class="wrap"> 
   <p>I have 100% opacity</p>  
</div>

CSS

.wrap, .wrap > * {
  position: relative;
}
.wrap:before {
  content: " ";
  opacity: 0.2;
  background: url("http://placehold.it/100x100/FF0000") repeat;     
  position: absolute;
  width: 100%;
  height: 100%;
}

Мой ответ не о статичной компоновке типа «родители-потомки», а об анимации.

Сегодня я делал демонстрацию svg, и мне нужно было, чтобы svg был внутри div (потому что svg создается с шириной и высотой родителя div, чтобы анимировать путь вокруг), и этот родительский div должен был быть невидимым во время анимации пути svg (а затем этот div должен был animate opacity from 0 to 1, это самая важная часть). И так как родительский div с opacity: 0скрывал мой svg, я наткнулся на этот хак с visibilityопцией (child с visibility: visibleможно увидеть внутри parent с visibility: hidden:)

.main.invisible .test {
  visibility: hidden;
}
.main.opacity-zero .test {
  opacity: 0;
  transition: opacity 0s !important;
}
.test { // parent div
  transition: opacity 1s;
}
.test-svg { // child svg
  visibility: visible;
}

А затем, в js, вы удаляете .invisibleкласс с функцией тайм-аута, добавляете .opacity-zeroкласс, запускаете макет с чем-то вроде whatever.style.top;и удаляете .opacity-zeroкласс.

var $main = $(".main");
  setTimeout(function() {
    $main.addClass('opacity-zero').removeClass("invisible");
    $(".test-svg").hide();
    $main.css("top");
    $main.removeClass("opacity-zero");
  }, 3000);

Лучше проверить это демо http://codepen.io/suez/pen/54bbb2f09e8d7680da1af2faa29a0aef?editors=011

На Mac вы можете использовать редактор предварительного просмотра, чтобы наложить непрозрачность на белый прямоугольник, наложенный на изображение .png, прежде чем поместить его в файл .css.

1) Изображение
логотипа

2) Создайте прямоугольник вокруг изображения
Прямоугольник вокруг логотипа

3) Измените цвет фона на белый
прямоугольник, ставший белым

4) Настройте непрозрачность прямоугольника
непрозрачного изображения

Присвойте непрозрачность 1.0 ребенку рекурсивно с помощью:

div > div { opacity: 1.0 }

Пример:

div.x { opacity: 0.5 }
div.x > div.x { opacity: 1.0 }

<div style="background-color: #f00; padding:20px;">
  <div style="background-color: #0f0; padding:20px;">
    <div style="background-color: #00f; padding:20px;">
      <div style="background-color: #000; padding:20px; color:#fff">
         Example Text - No opacity definition
      </div>
    </div>  
  </div>
</div>
<div style="opacity:0.5; background-color: #f00; padding:20px;">
  <div style="opacity:0.5; background-color: #0f0; padding:20px;">
    <div style="opacity:0.5; background-color: #00f; padding:20px;">
      <div style="opacity:0.5; background-color: #000; padding:20px; color:#fff">
        Example Text - 50% opacity inherited
      </div>
    </div>  
  </div>
</div>
<div class="x" style="background-color: #f00; padding:20px;">
  <div class="x" style="background-color: #0f0; padding:20px;">
    <div class="x" style="background-color: #00f; padding:20px;">
      <div class="x" style="background-color: #000; padding:20px; color:#fff">
         Example Text - 50% opacity not inherited
      </div>
    </div>  
  </div>
</div>
<div style="opacity: 0.5; background-color: #000; padding:20px; color:#fff">
  Example Text - 50% opacity
</div>

Для других людей, пытающихся сделать таблицу (или что-то еще) сфокусированной на одной строке, используя непрозрачность. Как сказал @Blowski, используйте цвет, а не непрозрачность. Проверьте эту скрипку: http://jsfiddle.net/2en6o43d/

.table:hover > .row:not(:hover)