容器内内容的不透明度
我有一个容器，其中的 background-color 使用 CSS 设置。在此容器中还有 4 个其他 div。我想以 0.5 不透明度显示容器。但是，当我这样做时，容器的内容也会以 0.5 不透明度显示。有什么方法可以以完全不透明的方式显示容器内容吗？
I have a container with the background-color set with CSS. In this container there are 4 other divs. I want to display the container with 0.5 opacity. However, when I do that, the content of the container also displays at 0.5 opacity. Is there any way I can display the container content at full opacity?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
CSS 3 引入了 rgba 颜色。您可以将它们与半透明PNG背景图像结合起来，以形成向后兼容性。
CSS 3 introduces rgba colours. You can combine them with translucent PNG background images for backwards compatibility.
一切：
不透明度：0.5；仅背景：
background-color: rgba(0, 0, 0, 0.5);但有些浏览器可能不支持 RGBA，因此请务必查看一下。
Everything:
opacity: 0.5;Only the background:
background-color: rgba(0, 0, 0, 0.5);Some browsers may not support RGBA though, so make sure you take a look at that.
使用 RGBA 背景颜色功能。
Use the RGBA background color feature.
对于支持 CSS3 的浏览器，您可以使用半透明颜色。您还可以使用半透明 PNG 作为背景，但 IE6 不支持（如果这是一个问题）。
否则，如果容器的子级不继承它，就不可能在容器上设置 0.5 的不透明度。您必须使用绝对定位将两个元素放置在彼此之上。
For browsers that support CSS3, you can use a semi-transparent color. You can also use a semi-transparent PNG for background, but that's not supported in IE6 (if that is a problem).
Otherwise it's not possible to have a 0.5 opacity on the container without it's children inheriting it. You would have to place two elements on top of each other using absolute positioning.
您的解决方案：
Your solution: