Question

我有一个div，其中有一个a标记。我将opacity:0.5提供给div，然后不透明度内的文字也是0.5 我不想使用背景图片，那么我如何在我的div中使用opacity:1来获得opacity:0.5的文本？

Answer 1

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

Answer 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

Answer 3

你做不到。实际的子不透明度不能大于其父HTML在HTML呈现模型中的不透明度。

来自the documentation（强调我的）：

不透明度可以被认为是后处理操作。从概念上讲，元素（包括其后代）后呈现为RGBA 在屏幕外图像中，不透明度设置指定如何混合屏幕外渲染到当前的复合渲染中。

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

Answer 4

a标记从父div获取不透明度。您可以在div rgba（0,0,0,0.5）上使用rgba CSS属性，并在标签rgba（255,0,0,1.0）上再次使用。

Answer 5

就像上面的答案一样，你需要一个单独的文本div，绝对定位以适应不透明的div。您可能还希望将z-index设置为高位。

Answer 6

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

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

以我的情况工作（可能不适合您，但值得一试）：）

如何使用不透明度：不透明度中的1个文本：0.5 div

6 个答案: