如何在容器 div 而不是子文本上设置不透明度？

Question

我有一个带有 CSS 样式规则 opacity: 0.4; 的 DIV。

在 div 内部有一个 a 标签，文本也有一个不透明度。

我如何声明文本： opacity :1 或任何好主意….您可以在以下链接中看到它：http://yagen.org/

画廊在页面上方。

原文由 treenet 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您设置了一个元素的不透明度，那么它的所有子元素的不透明度也会被设置。如果你想要透明背景上的不透明文本，请查看 RGBa。

结果看起来像这样：

 .mycontainer {
    background: rgb(60, 60, 60);
    background: rgba(60, 60, 60, 0.4);
}

.mycontainer a {
    color: #fff;
}

如果浏览器不支持 RGBa 颜色，第一个背景声明将用作回退 - 它只会是纯色。

这是 RGBa 颜色的重要参考： https ://css-tricks.com/rgba-browser-support/

原文由 derekerdmann 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果您有这种 HTML：

 <div id="container">
    <p>
        Darn fanatically far and tarantula jeepers meek a secret much so hence underneath monogamously interwove apart gosh spilled far where and badger.
    </p>
    <a href="#">This is a link</a>
</div>

即使你的 CSS 是这样的。

 #container {
    background: #000;
    color: #fff;
    opacity: 0.4;
}

#container a {
    color: #ff0450;
    opacity: 1;
}

它不会使链接具有比容器更大的不透明度，因为不透明度是 从父级继承的。

唯一的方法是使用 rgba 值，但它在 IE 中不起作用。

正确 的做法是这样的——

 #container {
    background: rgba(0,0,0,0.4);
    color: #fff;
}

看看这个 小提琴

原文由 Aniket 发布，翻译遵循 CC BY-SA 3.0 许可协议