如何使 css 不透明度属性不从父 div 继承？答案

【问题标题】：How to make css opacity property not to be inherited from parent div´s?如何使 css 不透明度属性不从父 div 继承？
【发布时间】：2012-07-03 00:04:41
【问题描述】：

我希望 png 图像后面有一个黑条，并且我希望图像后面的黑条具有不透明度。当我对黑条应用不透明度时，他的子元素（png 图像）继承了这个不透明度。我不希望这种情况发生。

该网站是 www.tomasfleiderman.com.ar ，上面写着“为钱而工作，为爱而设计”我想要一个不透明的黑条。

代码如下：

<style type="text/css">
p {
font-size:40px;
color: white;
}
#caja
{

}
#fondofrase
{
}
</style>
<!--
<p>Work for money design for love</p>
  -->
<div  id="fondofrase">
<div  id="caja">
<div>
<img src="http://www.tomasfleiderman.com.ar/1.png" alt="Texto" height="60%" width="60%"/>
</div>
</div>
</div>

谢谢

【问题讨论】：

标签： html css

【解决方案1】：

您可以使用半透明背景颜色来做到这一点：http://jsfiddle.net/alessandro_pezzato/LWh75/

 background: rgba(0,0,0,0.8);

【讨论】：

【解决方案2】：

你不能这样做，至少不容易。子元素具有与父元素相同的最大不透明度，因此如果父元素的不透明度为“0.6”，则子图像的不透明度只能为“0.6”。不过，您可以使用一些绝对定位技术将div 和img 作为兄弟元素而不是父子元素层叠在一起。

<style>
    #positioner {
        position: relative;
    }

    #theText,
    #theImage {
        position: absolute;
        top: 0;
        left: 0;
    }
</style>
<div id="positioner">
    <p id="theText">Work for money design for love</p>
    <img id="theImage" />
</div>

【讨论】：

【解决方案3】：

您可以尝试在周围的<div>-tag 上设置此样式：

background: rgba(0, 0, 0, .5);

但是，rgba 的浏览器支持并不完美，在使用此解决方案之前您绝对应该考虑一下。它倾向于在低于 9 的 IE 版本中崩溃（请参阅链接：http://css-tricks.com/rgba-browser-support/）。

【讨论】：