仅使用CSS,是否可以使元素的背景半透明,但元素的内容(文本和图像)不透明?
我想在不将文本和背景作为两个独立元素的情况下完成这一点。
尝试时:
p型{位置:绝对;背景色:绿色;过滤器:alpha(不透明度=60);不透明度:0.6;}跨度{颜色:白色;过滤器:alpha(不透明度=100);不透明度:1;}<p><span>你好,世界</span></p>
看起来子元素受到其父元素的不透明度的影响,因此不透明度:1相对于父元素的不可见性:0.6。
仅使用CSS,是否可以使元素的背景半透明,但元素的内容(文本和图像)不透明?
我想在不将文本和背景作为两个独立元素的情况下完成这一点。
尝试时:
p型{位置:绝对;背景色:绿色;过滤器:alpha(不透明度=60);不透明度:0.6;}跨度{颜色:白色;过滤器:alpha(不透明度=100);不透明度:1;}<p><span>你好,世界</span></p>
看起来子元素受到其父元素的不透明度的影响,因此不透明度:1相对于父元素的不可见性:0.6。
当前回答
不透明度的背景,但不是文本有一些想法。要么使用半透明图像,要么覆盖其他元素。
其他回答
如果你使用的是Less,你可以使用褪色(颜色,30%)。
有一个更简单的解决方案是在同一个分区上的图像上放置一个覆盖层。这不是该工具的正确用法。但是,使用CSS制作覆盖层就像一种魅力。
使用如下插入阴影:
box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);
仅此而已:)
为了使元素的背景半透明,但使元素的内容(文本和图像)不透明,您需要为该图像编写CSS代码,并且必须添加一个名为opacity的最小值属性。
例如
.image {
position: relative;
background-color: cyan;
opacity: 0.7;
}
//值越小,透明度越高,或者值越低,透明度越低。
使用半透明PNG或SVG图像或使用CSS:
background-color: rgba(255, 0, 0, 0.5);
这是一篇来自css3.info、Opacity、RGBA和妥协(2007-06-03)的文章。
注意,一旦底层背景穿透,文本仍然需要与背景形成足够的对比。
<p style=“背景色:rgba(255,0,0,0.5);”><span>你好,世界</span></p>
不透明度的背景,但不是文本有一些想法。要么使用半透明图像,要么覆盖其他元素。