嵌套 div 标签中的不透明度 [重复]

Posted 2023-03-06

【中文标题】嵌套 div 标签中的不透明度 [重复]

【英文标题】：Opacity in nested div tag [duplicate]

【发布时间】：2013-08-01 11:17:45

【问题描述】：

我正在寻找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 不透明度值进行更改。

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

【参考方案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 作为其他旧浏览器的后备