<!--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>

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

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

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

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

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

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

基本上，它使用JavaScript从父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的颜色不透明度

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

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