是否可以仅使用CSS使元素的背景半透明,但使元素的内容(文本和图像)不透明
我希望在不将文本和背景作为两个独立元素的情况下完成此任务
尝试时:
p{
位置:绝对位置;
背景颜色:绿色;
过滤器:α(不透明度=60);
不透明度:0.6;
}
跨度{
颜色:白色;
过滤器:α(不透明度=100);
不透明度:1;
}
<;p>;
<;span>;你好,世界</span>;
</p>
看起来子元素受其父元素的不透明度约束,因此opacity:1与父元素的opacity:0.6相对
使用半透明PNG或SVG图像或使用CSS:
背景色:rgba(255,0,0,0.5);
这里有一篇来自css3.info的文章,不透明度、RGBA和折衷(2007-06-03)
<;p style=“背景色:rgba(255,0,0,0.5);”>;
<;span>;你好,世界</span>;
</p>