logo标签列表

如何在opacity为0.5的div中呈现opacity为1的文本

cssopacity
5
1
一些问题的副本，例如：https://dev59.com/93RB5IYBdhLWcg3wZWbi?rq=1 - kapa
6个回答
12

使用 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格式）。

但这并不等同于设置不透明度：它只改变背景颜色，而不是其他包含元素或背景图像的不透明度。 - Denys Séguret
他明确表示不想使用背景图片，也不想影响子项的透明度。如果他想要这样做，他只需为子项设置透明度即可。 - PlantTheIdea
3

无法实现。在HTML渲染模型中，真实子元素的不透明度不能大于其父元素的不透明度。

从文档（重点是我的）可以看到：

不透明度可以被视为后处理操作。在概念上，元素（包括其后代）渲染为RGBA离屏图像后，不透明度设置指定如何将离屏渲染混合到当前复合渲染中。

您必须将子div放在父div外部。这通常使用与静态位置不同的定位方式来实现。

嗯，我能知道为什么这个被踩了吗？是因为有人不理解颜色的 alpha 值和 div 的透明度之间的区别吗？ - Denys Séguret
2

为文本使用完全不同的 <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
0

警告：此解决方案仅在您希望外部元素完全透明时有效。

使用visibility: hidden和visibility: visible代替opacity: 0和opacity: 1

在我的情况下起作用（可能不适用于您的情况，但值得一试）:)

0

a标签从父级div继承不透明度。您可以在div上使用rgba CSS属性rgba(0, 0, 0, 0.5)，并再次在a标签上使用rgba(255, 0, 0, 1.0)。

0

就像上面的答案所述，您需要一个单独的 div 来放置文本，绝对定位以适应不透明的 div。您可能还想将 z-index 设置为较高的值。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接