仅使用CSS,是否可以使元素的背景半透明,但元素的内容(文本和图像)不透明?

我想在不将文本和背景作为两个独立元素的情况下完成这一点。

尝试时:

p型{位置:绝对;背景色:绿色;过滤器:alpha(不透明度=60);不透明度:0.6;}跨度{颜色:白色;过滤器:alpha(不透明度=100);不透明度:1;}<p><span>你好,世界</span></p>

看起来子元素受到其父元素的不透明度的影响,因此不透明度:1相对于父元素的不可见性:0.6。


当前回答

最好使用半透明.png。

只需打开Photoshop,创建一个2x2像素的图像(选择1x1可能会导致Internet Explorer错误!),用绿色填充,并将“图层选项卡”中的不透明度设置为60%。然后保存它并使其成为背景图像:

<p style="background: url(green.png);">any text</p>

当然,它很酷,除了在可爱的InternetExplorer6中。有更好的修复方法可用,但这里有一个快速破解方法:

p {
    _filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none');
}

其他回答

这是我能想到的最好的解决方案,不使用CSS 3。据我所知,它在Firefox、Chrome和Internet Explorer上运行得很好。

将一个容器div和两个子div放在同一级别,一个用于内容,另一个用于背景。使用CSS,自动调整背景大小以适应内容,并使用z索引将背景放在后面。

.容器{位置:相对;}.内容{位置:相对;颜色:白色;z指数:5;}.背景{位置:绝对;顶部:0px;左:0px;宽度:100%;高度:100%;背景色:黑色;z指数:1;/*这三行用于所有浏览器中的透明度*/-ms filter:“progid:DXImageTransform.Microsoft.Alpha(不透明度=50)”;过滤器:alpha(不透明度=50);不透明度:.5;}<div class=“container”><div class=“content”>内容如下。<br/>背景应该适合。</div><div class=“background”></div></div>

CSS 3为您的问题提供了一个简单的解决方案。使用:

background-color:rgba(0, 255, 0, 0.5);

这里,rgba代表红色、绿色、蓝色和alpha值。由于255而获得绿色值,并且通过0.5α值获得半透明度。

这给出了所需的结果-

body {
    background-image: url("\images\dark-cloud.jpg");
    background-size: 100% 100%;
    background-attachment: fixed;
    opacity: .8;
}

设置背景的不透明度。

我通常在工作中使用这门课。很好。

.透明{过滤器:alpha(不透明度=50);/*Internet Explorer*/-khtml不透明度:0.5;/*KHTML和旧Safari*/-moz不透明度:0.5;/*Firefox和Netscape*/不透明度:0.5;/*Firefox、Safari和Opera*/}

有一个更简单的解决方案是在同一个分区上的图像上放置一个覆盖层。这不是该工具的正确用法。但是,使用CSS制作覆盖层就像一种魅力。

使用如下插入阴影:

box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);

仅此而已:)