如何在不影响子元素的情况下应用不透明度，使用HTML/CSS？

Question

71

我希望使用 HTML 和 CSS 实现以下效果：

schema

我已经尝试将容器的不透明度设置为0.3，而将盒子的不透明度设置为1，但是它没有起作用：两个div都具有0.3的不透明度。

我想要实现的效果是一个弹出框位于页面顶部。通过降低下面内容的不透明度来突出显示它。

- Benjamin Crouzier

可能是CSS - 不透明文本在低不透明度div上？的重复问题。 - Félix Adriyel Gagnon-Grenier

@FélixGagnon-Grenier 我认为这个解决方案不会对 OP 有益，因为他可能也想要淡化内容。 - xpy

12个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mikhail Batcer · Answer 1

您可以在容器后面绝对定位一个与其大小相同的兄弟元素，并对其应用不透明度。

同时，不要为您的容器设置背景。

这样，容器的子元素就没有不透明的父元素，问题就解决了。

- megaSteve4 · Answer 2

这可能不是最正统的方法，但您可以为每个div /容器使用一个小的半透明背景图像进行重复。虽然在今天的时代，您应该能够使用纯（简单而不是hackish）css而无需js来实现此目的，但如上面的答案所示，这并不那么直接...

使用平铺图像可能看起来有点过时，但在所有浏览器中都可以正常工作，毫无问题。