HTML CSS - 使 div 包装器半透明且内部文本不透明的最佳实践

Question

使用我的 div 标签和 div id="wrapper"，我已将包装器的宽度设置为 960 像素，并希望具有半透明的效果，以便显示主体背景。我在包装器内还有另一个带有文本的 div，我想将该文本设置为 0 不透明度，以便在设置 div 时文本不会变成半透明。

一开始我尝试设置

 #wrapper{ opacity: .5;}

但那没有用，所以我设置了

background-color: rgba(0,100,0,.5);

这就是诀窍。文本不透明，但包装是。

我的问题是：这是实现此类设计的最佳做法还是最常见和最简单的方法？

Answer 1

您的选择是有限的。如果可以的话，在容器 div 上使用 RGBA 是一种更简洁的方法。否则，请从容器中删除文本并将它们分层，以便它们看起来像是包含在容器中。

如果 CSS 允许子级使用 opacity: 2，或者允许覆盖子级的不透明度，那就太好了，但事实并非如此。