上面的答案对我来说似乎很复杂，所以我写了这个:

#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是你的(不透明度)父母，弹出是你的(不透明度)孩子。它下面的所有内容都是站点的其余部分。

看起来，display: block元素并没有从display: inline父元素继承不透明度。

Codepen例子

也许是因为它是无效的标记，浏览器正在秘密地分离它们?因为资料没有显示这种情况。我遗漏了什么吗?

子元素的不透明度继承自父元素。

但是我们可以使用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

我解决了这个问题，首先创建并保存了一个褪色的图像，然后在css背景中使用。我使用以下python代码:

from PLI import Image
bg = Image.open('im1.jpg')
fg = Image.open('im2.jpg')
#blend at ratio .3
Image.blend(bg,fg,.3).save('out.jpg')

在这里，im1.jpg只是一个与im2.jpg尺寸相同的白色图像。

如果你必须使用一个图像作为透明背景，你可以使用一个伪元素来解决它:

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

上面的答案对我来说似乎很复杂，所以我写了这个:

#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是你的(不透明度)父母，弹出是你的(不透明度)孩子。它下面的所有内容都是站点的其余部分。