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作为其他旧浏览器的后备

嵌套div标签中的不透明度

1 个答案: