Отсутствие вменения данных с помощью автоматического кодера на небольшом наборе данных

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

Но мы можем использовать свойство 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