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

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

尝试时:

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

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


当前回答

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

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

否则就不可能了。

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

其他回答

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

使用半透明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>

该方法允许您在背景中显示图像,而不仅仅是纯色,还可以用于在其他属性(如边界)上显示透明度。不需要透明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后面(使用零值或更适合您需要的任何值)。

这里有一个jQuery插件Transify(Transify-一个jQueryplugin,可以轻松地将透明度/不透明度应用于元素的背景),它可以为您处理所有事情。

我时不时地遇到这个问题,所以我决定写一些能让生活更轻松的东西。该脚本小于2KB,只需要一行代码就可以运行,如果您愿意,它还可以处理背景的不透明度动画。

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

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