仅使用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。
当前回答
问题是,在您的示例中,文本实际上是完全不透明的。它在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*/}