使用 rgba(包括 alpha 透明度)设置父元素的背景颜色。例如:
.Container {
background-color:rgb(0,0,0); /* fallback for IE 8 and below */
background-color:rgba(0,0,0,0.5);
}
.Text {
color:rgb(255,255,255);
}
这将设置容器背景颜色的不透明度,但不会设置子元素的不透明度。如果需要设置子元素的不透明度,请使用另一个类来设置子元素的不透明度:
.OtherChildItem {
opacity:0.5;
filter:alpha(opacity=50); /* IE 8 and below */
}
如果您想使用背景图片,请在图片本身上设置不透明度(使用PNG格式)。
无法实现。在HTML渲染模型中,真实子元素的不透明度不能大于其父元素的不透明度。
从文档(重点是我的)可以看到:
不透明度可以被视为后处理操作。在概念上,元素(包括其后代)渲染为RGBA离屏图像后,不透明度设置指定如何将离屏渲染混合到当前复合渲染中。
您必须将子div放在父div外部。这通常使用与静态位置不同的定位方式来实现。
为文本使用完全不同的 <div>
。
<div id="parentDiv">
<div id="mainDiv">
</div>
<div id="childDiv">
Hello
</div>
</div>
CSS
#parentDiv
{
position:relative;
}
#childDiv
{
position:absolute;
top:45px;
left:45px;
opacity:1;
}
#mainDiv
{
width:100px;
height:100px;
opacity:0.5;
}
请查看:http://jsfiddle.net/AliBassam/aH9HC/ 我添加了背景颜色,以便您可以注意结果。
由于我强制您使用 absolute
,所以我不希望您在定位文本时遇到问题,因此进行一些数学计算以获得最佳位置:
top = ( Height of Div Opacity(0.5) - Height of Div Opacity(1) ) / 2
left = ( Width of Div Opacity(0.5) - Width of Div Opacity(1) ) / 2
警告:此解决方案仅在您希望外部元素完全透明时有效。
使用visibility: hidden
和visibility: visible
代替opacity: 0
和opacity: 1
在我的情况下起作用(可能不适用于您的情况,但值得一试):)
a标签从父级div继承不透明度。您可以在div上使用rgba CSS属性rgba(0, 0, 0, 0.5),并再次在a标签上使用rgba(255, 0, 0, 1.0)。
就像上面的答案所述,您需要一个单独的 div 来放置文本,绝对定位以适应不透明的 div。您可能还想将 z-index 设置为较高的值。