Html 如何使css不透明属性不从父div´继承；s

我希望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>

p{
字体大小：40px；
颜色：白色；
}
#卡贾
{
}
#丰多夫雷斯
{
}

---

谢谢

你不能这么做，至少不容易做到。子元素的最大不透明度与父元素相同，因此，如果父元素的不透明度为“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>
​

#定位器{
位置：相对位置；
}
#文本，
#图像{
位置：绝对位置；
排名：0；
左：0；
}
为钱而工作为爱而设计

​

你不能这么做，至少不容易做到。子元素的最大不透明度与父元素相同，因此，如果父元素的不透明度为“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>
​

#定位器{
位置：相对位置；
}
#文本，
#图像{
位置：绝对位置；
排名：0；
左：0；
}
为钱而工作为爱而设计

​

您可以使用半透明背景色执行此操作：

---

可以使用半透明背景色执行此操作：

---

您可以尝试在周围的

-标记上设置此样式：

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

---

但是，RGBA的浏览器支持并不完美，在使用这个解决方案之前一定要考虑一些问题。它倾向于在9以下的IE版本中中断（请参见链接：）。

您可以尝试在周围的

-标记上设置此样式：

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

但是，RGBA的浏览器支持并不完美，在使用这个解决方案之前一定要考虑一些问题。它倾向于在9以下的IE版本中中断（参见链接：）