0

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

谢谢

4

3 回答 3

2

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

 background: rgba(0,0,0,0.8);
于 2012-07-02T16:03:18.447 回答
1

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

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

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

于 2012-07-02T16:04:41.597 回答
1

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

<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>
​
于 2012-07-02T16:00:46.623 回答