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

Question

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

起初我尝试设置

 #wrapper{ opacity: .5;}

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

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

这就成功了。文本不是透明的，但包装是透明的。

我的问题是:这是最佳实践还是什么是实现此类设计的最常见和最简单的方法？

Answer 1

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

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