3

我有div一个a标签。然后我给opacity:0.5了div不透明度里面的文本也是0.5我不想使用背景图片，那么我怎么能opacity:1在我的div里面有一个文本呢opacity:0.5 ？

4

6 回答 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）。

于 2013-01-29T15:33:26.893 回答
3

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

从文档（强调我的）：

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

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

于 2013-01-29T15:32:22.413 回答
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
于 2013-01-29T15:34:25.487 回答
0

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

于 2013-01-29T15:35:33.850 回答
0

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

于 2013-01-29T15:49:06.133 回答
0

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

代替opacity: 0andopacity: 1使用visibility: hiddenandvisibility: visible

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

于 2019-09-19T09:50:37.370 回答