正如其他人在这篇文章和其他类似的文章中提到的，避免这个问题的最好方法是使用RGBA/HSLA或使用透明的PNG。

但是，如果你想要一个荒谬的解决方案，类似于这个线程(这也是我的网站)中另一个答案中的链接，这里有一个全新的脚本，我写了一个自动修复这个问题，称为thatsNotYoChild.js:

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

基本上，它使用JavaScript从父div中删除所有子元素，然后将子元素重新定位到它们应该在的位置，而不再是该元素的子元素。

对我来说，这应该是最后的手段，但我认为如果有人想这样做的话，写一些这样的东西会很有趣。

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

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

以下是对我有用的:

改变了

来自:

opacity: 0.52;
background-color: #7c7c7c;

To:

opacity: 1 !important;
background-color: rgba(124, 124, 124, 0.52) !important;

要将十六进制和不透明度转换为rgba， 使用http://hex2rgba.devoth.com/这样的网站

我解决了这个问题，首先创建并保存了一个褪色的图像，然后在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尺寸相同的白色图像。

不要使用不透明度，使用rgba设置背景颜色，其中“a”是透明度级别。

所以不要:

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

use

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

我也遇到了同样的问题，在谷歌了一下之后，我找到了一些解决这个问题的方法(3种方法)。 我在这里分享解决方案，你可以尝试其中任何一种。

选项1: 在之前或之后使用伪标记元素作为背景

.parentContainer {
    position: relative;
}
.parentContainer:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0.6;
}
.childContent {
    position: relative;
    color: red;
    z-index: 1;
}

选项2: 使用带有alpha值的rgba颜色而不是不透明度。

 <div id="parentContainer" style="background: rgba(255,255,255,0.6);">
    <div id="childContent">
         Content ...
    </div>
 </div>

选项3: 使用背景div，一个元素的绝对位置高于另一个元素。

<div class="parentContainer">
  <div class="childContent">
    Here is the content.
  </div>
  <div class="background"></div>
</div>


.parentContainer {
  position: relative;
}
.childContent {
  position: relative;
  color: White;
  z-index: 5;
}
.background {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: Black;
  z-index: 1;
  opacity: .5;
}