是否可以仅使用 CSS 使元素的 background
半透明,但元素的内容(文本和图像)不透明?
我想在不将文本和背景作为两个单独的元素的情况下完成此操作。
尝试时:
p {
position: absolute;
background-color: green;
filter: alpha(opacity=60);
opacity: 0.6;
}
span {
color: white;
filter: alpha(opacity=100);
opacity: 1;
}
<p>
<span>Hello world</span>
</p>
看起来子元素受其父元素的不透明度影响,因此 opacity:1
是相对于父元素的 opacity:0.6
的。
最佳答案
background-color: rgba(255, 0, 0, 0.5);
这是一篇来自 css3.info 的文章, Opacity, RGBA and compromise (2007 年 6 月 3 日)。
注意文本仍然是needs sufficient contrast与背景,一旦底层背景闪耀。
<p style="background-color: rgba(255, 0, 0, 0.5);">
<span>Hello, World!</span>
</p>
关于html - 如何使用 CSS 降低元素背景的不透明度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38916198/