Как остановить распространение свойств внешнего div на внутренний div? [Дубликат]

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

#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 это ваше (непрозрачность ) parent, pop-up это ваши (без прозрачности) дети. Все, что находится внизу вашего сайта.

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

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

Текстовый контейнер 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;

               }

Выход: -

[/g0]

Текст не отображается, поскольку наследует непрозрачность от родительский 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;  
               }

Выход:

[/g1]

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

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

Пример Codepen

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

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

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

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

Итак, вместо:

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

используйте

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

Не существует единого подхода к размеру, но одна вещь, которую я нашел особенно полезной, - это установить непрозрачность для прямых детей 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, применяя альфа фильтры

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

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

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

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

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

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

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

Мой ответ не о статическом макете parent-child, о анимации.

Сегодня я делал демонстрацию svg, и мне нужно было svg быть внутри div (потому что svg создается с шириной div родителя и height, чтобы анимировать путь), и этот родительский div должен был быть невидим во время анимации пути SVG (а затем этот div должен был animate opacity from 0 to 1, это самая важная часть). И поскольку родительский div с opacity: 0 скрывал мой svg, я столкнулся с этим хаком с опцией visibility (дочерний элемент с visibility: visible можно увидеть внутри родителя с помощью 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

Вопрос не задан, если фон является цветом или изображением, но поскольку @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>

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

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%;
}

Назначить непрозрачность 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>

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

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

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