html - 嵌套 div 标签中的不透明度

Question

我正在寻找css一种解决方案，我可以为背景颜色设置较低的值opacity，并且它上面的文本将完全不透明。

我试过这个：

 <div style="opacity: 0.4; background:none repeat scroll 0% 0% rgb(242, 242, 242); ">
    <div style="opacity: 1;">
      Complete opaque text over background color
    </div>
 </div>

但这没有用。这里背景颜色和文本的不透明度都根据外部 div 不透明度值进行更改。

任何人都可以提出任何解决方案吗？

Answer 1

您可以使用rgba设置半透明颜色：

 <div style="background:rgba(242, 242, 242, 0.4);">
    <div>
      Complete opaque text over background color
    </div>
 </div>

子元素的不透明度永远不会高于父元素的不透明度，如果父元素的不透明度为 0.4，那么不透明度为 1 的子元素也将是 0.4，不透明度为 0.5 的子元素将是 0.2 等等。它是相对于父元素计算的不透明度。

对于较旧的 IE 版本filter，用于实现此效果或常规rgb作为其他旧浏览器的后备