小虾虎鱼

小虾虎鱼

css使背景透明内容不透明的方法

作者 禾惠 发表于 2013/01/31,最后修改于 2013/01/31

以前是这样实现背景透明内容不透明的:将背景与内容分别放在两个DIV中,然后使背景DIV透明,最终达到背景透明内容不透明的效果(挺麻烦的),背景透明使用的样式是{opacity:0.5;filter:alpha(opacity=50);}。

最近才发现,原来还有更好的方法。

支持CSS3的浏览器我们可以使用background-color:rgba(0,0,0,0.5)来实现透明,rgba中的a则代表透明度,取值范围在0-1之间。

对于不支持CSS3的IE浏览器我们可以使用滤镜来达到使背景透明的目的,我们可以使用IE专有的滤镜,如下:

filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#77000000, endColorstr=#77000000);

只需要保持startColorStr与endColorStr值相同即可。其中startColorStr与endColorStr的值的格式为#AARRGGBB, AA 、 RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 - FF 。 RR 指定红色值, GG 指定绿色值, BB 指定蓝色值,参阅 #RRGGBB 颜色单位。 AA 指定透明度, 00 是完全透明, FF 是完全不透明。超出取值范围的值将被恢复为默认值。 取值范围为 #FF000000 - #FFFFFFFF 。默认值为 #FF0000FF (不透明蓝色)。


因此,如果需要实现DIV背景透明内容不透明则可以这样做:

.opacity{background:rgba(0,0,0,0.5); filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#77000000, endColorstr=#77000000);}


上面的做法是让所有的IE浏览器都使用滤镜,而IE9,IE10是支持CSS3的rgba属性的,所以我们可以做一些处理:

在head中再添加(针对IE9以下的浏览器):

<!--[if lt IE 9]>
<style>
.opacity{filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#77000000, endColorstr=#77000000);}
</style>
<![endif]-->