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

Question

我想要一个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> 

感谢

Answer 1

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

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

Answer 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> 
​ 

Answer 3

你可以尝试对周围<div> - 标签设置此风格：

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

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