仅使用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。
当前回答
当使用#AARGGBB格式时,它对我有效,因此对我有效的格式是#1C00ff00。试试看,因为我看到它对某些人有效,而对其他人无效。我在CSS中使用它。
其他回答
问题是,在您的示例中,文本实际上是完全不透明的。它在p标记内具有完全不透明性,但p标记只是半透明的。
您可以添加半透明的PNG背景图像,而不是在CSS中实现,或者将文本和div分离为两个元素,并将文本移动到框上(例如,负边距)。
否则就不可能了。
正如Chris所提到的:如果你使用一个具有透明度的PNG文件,你必须使用JavaScript解决方法来让它在烦人的Internet Explorer中工作。。。
背景色:rgba(255,0,0,0.5);如上所述,简单地说就是最好的答案。即使在2013年,使用CSS3也不简单,因为不同浏览器的支持水平会随着每次迭代而变化。
虽然所有主要浏览器都支持背景色(CSS 3并不陌生)[1],但alpha透明度可能很棘手,尤其是在版本9之前的Internet Explorer以及版本5.1之前的Safari浏览器上的边框颜色。[2]
使用Compass或SASS这样的工具确实有助于生产和跨平台兼容性。
[1] W3Schools:CSS背景色属性
[2] Norman的博客:浏览器支持清单CSS3(2012年10月)
使用半透明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>
这是我能想到的最好的解决方案,不使用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>
最好使用半透明.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');
}