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

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

尝试时:

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

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


当前回答

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

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

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

其他回答

该方法允许您在背景中显示图像,而不仅仅是纯色,还可以用于在其他属性(如边界)上显示透明度。不需要透明PNG图像。

在CSS中使用:before(或:after),并赋予它们不透明度值,使元素保持其原始不透明度。因此,您可以使用:before来创建一个人造元素,并为其提供所需的透明背景(或边框),然后将其移动到您希望使用z索引保持不透明的内容后面。

一个例子(fiddle)(注意,带有类dad的DIV只是为了提供一些上下文和与颜色的对比,实际上不需要这个额外的元素,红色矩形向下移动一点并向右移动,以便在fancyBg元素后面留下可见的背景):

<div class="dad">
    <div class="fancyBg">
        Test text that should have solid text color lets see if we can manage it without extra elements
    </div>
</div>

使用此CSS:

.dad {
    background: lime; border: 1px double black; margin: 1ex 2ex;
    padding: 0.5ex; position: relative; -k-z-index: 5;
}
.fancyBg {
    border: 1px dashed black; position: relative; color: white; font-weight: bold;
    z-index: 0; /*background: black;*/
}
.fancyBg:before {content:'-'; display: block;
    position: absolute; background: red; opacity: .5;
    top: 2ex; right: -2ex; bottom: -2ex; left: 2ex;
    /*top: 0; right: 0; bottom: 0; left: 0;*/
    z-index: -1;
}

在本例中,.fancyBg:before具有您想要的具有透明度的CSS财产(本例中为红色背景,但可以是图像或边框)。它被定位为绝对的,以便将其移到.faceyBg后面(使用零值或更适合您需要的任何值)。

问题是,在您的示例中,文本实际上是完全不透明的。它在p标记内具有完全不透明性,但p标记只是半透明的。

您可以添加半透明的PNG背景图像,而不是在CSS中实现,或者将文本和div分离为两个元素,并将文本移动到框上(例如,负边距)。

否则就不可能了。

正如Chris所提到的:如果你使用一个具有透明度的PNG文件,你必须使用JavaScript解决方法来让它在烦人的Internet Explorer中工作。。。

最简单的方法是使用半透明背景PNG图像。

如果需要,可以使用JavaScript使其在InternetExplorer6中工作。

我使用Internet Explorer 6中透明PNG中概述的方法。

除此之外,您可以使用两个并排的兄弟元素来伪装它-使一个半透明,然后将另一个绝对放置在顶部。

最好使用半透明.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');
}

当使用#AARGGBB格式时,它对我有效,因此对我有效的格式是#1C00ff00。试试看,因为我看到它对某些人有效,而对其他人无效。我在CSS中使用它。