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

所以不要:

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

use

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

不透明度实际上在CSS中并不继承。这是一个渲染后的组转换。换句话说，如果<div>设置了不透明度，则将div及其所有子div渲染到一个临时缓冲区中，然后将整个缓冲区合成到具有给定不透明度设置的页面中。

在这里，您究竟想要做什么取决于您正在寻找的确切渲染，这在问题中是不清楚的。

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

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

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

基本上，它使用JavaScript从父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%;
}

其他人试图使一个表(或其他东西)看起来集中在一行使用不透明度。就像@Blowski说的，使用颜色而不是不透明度。看看这个小提琴:http://jsfiddle.net/2en6o43d/

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

我的答案不是关于静态的父子布局，而是关于动画。

I was doing an svg demo today, and i needed svg to be inside div (because svg is created with parent's div width and height, to animate the path around), and this parent div needed to be invisible during svg path animation (and then this div was supposed to animate opacity from 0 to 1, it's the most important part). And because parent div with opacity: 0 was hiding my svg, i came across this hack with visibility option (child with visibility: visible can be seen inside parent with 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中，你用timeout函数删除。invisible类，添加。opaque -zero类，用。style。top之类的东西触发布局;并删除。opaque - 0类。

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

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

但是我们可以使用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 { 宽度:630 px; 身高:420 px; 显示:表; 背景:线性渐变( rgba(0, 0, 0, 0。8), rgba(0, 0, 0, 0。8)), url (http://cdn.moviestillsdb.com/sm/35bc3c6a2b791425de6caf8b9391026e/rambo-iii.jpg); ｝ h1 { 显示:表格单元; vertical-align:中间; text-align:中心; 颜色:# fff; ｝ < div class = "包装" > <标题> 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是你的(不透明度)父母，弹出是你的(不透明度)孩子。它下面的所有内容都是站点的其余部分。

如果你的父类是透明的，并且你希望你的子类是相同的，但是是专门定义的(例如覆盖一个选择下拉菜单的用户代理样式)，有一个小技巧:

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

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

递归地为子对象分配不透明度1.0:

div > div { opacity: 1.0 }

Example: 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>

没有放之四海而皆准的方法，但我发现有一件事特别有用，那就是为div的直接子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;
}

如果你有背景颜色/图片在父文件上，你可以通过应用alpha过滤器来修复rgba和background-image的颜色不透明度

在mac上，你可以使用预览编辑器将不透明度应用到你的。png图像上的白色矩形上，然后把它放在你的。css中。1)ImageLogo2)在imagereectanle周围创建一个矩形3)改变背景颜色为白色矩形变成白色4)调整矩形不透明图像

以下是对我有用的:

改变了

来自:

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尺寸相同的白色图像。

<!--Background opacity--> <style> .container1 { width: 200px; height: 200px; background: rgba(0, 0, 0, .5); margin-bottom: 50px; } </style> <div class="container1"> <div class="box1">Text</div> </div> <!--Before, after, z-index opacity--> <style> .container2 { width: 200px; height: 200px; position: relative; margin-bottom: 100px; } .container2:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: black; opacity: .5; z-index: 1; } .box2 { position: relative; z-index: 2; } </style> <div class="container2"> <div class="box2">Text</div> </div> <!--Outline opacity--> <style> .container3 { width: 200px; height: 200px; outline: 50px solid rgba(0, 0, 0, .5); margin: 50px; } .box3 { position: relative; left: -16px; } </style> <div class="container3"> <div class="box3">Text</div> </div>

我也遇到了同样的问题，在谷歌了一下之后，我找到了一些解决这个问题的方法(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;
}