如何在不透明度：0.5 div 中有不透明度：1 文本答案

【问题标题】：how to have an opacity:1 text in an opacity:0.5 div如何在不透明度：0.5 div 中有不透明度：1 文本
【发布时间】：2019-09-19 19:32:49
【问题描述】：

我有一个div，其中有一个a 标签。我把opacity:0.5 给div 然后不透明度里面的文字也是0.5 我不想使用背景图片，那么如何在我的 div 中使用 opacity:1 和 opacity:0.5 显示文本？？

【问题讨论】：

多个问题的重复，例如：stackoverflow.com/questions/637921/…

标签： css opacity

【解决方案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）。

【讨论】：

但这与设置不透明度不同：它只改变背景颜色，而不是其他包含元素或背景图像的不透明度。
他明确表示不想使用背景图片，也不想影响子项的不透明度。如果他想这样做，他只需为孩子设置不透明度。

【解决方案2】：

你不能。在 HTML 渲染模型中，真正的子代不透明度不能大于其父代的不透明度。

来自the documentation（强调我的）：

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

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

【讨论】：

哼。我能知道为什么这被否决了吗？这是因为有人没有得到颜色的 alpha 和 div 的不透明度之间的区别吗？

【解决方案3】：

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

【讨论】：

【解决方案4】：

a 标签从父 div 获取不透明度。您可以在 div rgba(0, 0, 0, 0.5) 和标签 rgba(255, 0, 0, 1.0) 上使用 rgba CSS 属性。

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

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

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

【讨论】：