是否可以仅使用 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
父母的。
要么使用半透明PNG or SVG图片或使用CSS:
background-color: rgba(255, 0, 0, 0.5);
这是来自 css3.info 的一篇文章,不透明度、RGBA 和折衷(2007-06-03)。
请注意,文本仍然需要足够的对比度与背景一起,一旦底层背景闪耀。
<p style="background-color: rgba(255, 0, 0, 0.5);">
<span>Hello, World!</span>
</p>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)