背景透明 内容不透明的方法
以前是这样实现背景透明内容不透明的:将背景与内容分别放在两个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专有的滤镜,如下:
1 |
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背景透明内容不透明则可以这样做:
1 |
.opacity{background:rgba(0,0,0,0.5); filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#77000000, endColorstr=#77000000);} |
上面的做法是让所有的IE浏览器都使用滤镜,而IE9,IE10是支持CSS3的rgba属性的,所以我们可以做一些处理:
在head中再添加(针对IE9以下的浏览器):
1 2 3 4 5 |
<!--[if lt IE 9]> <style> .opacity{filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#77000000, endColorstr=#77000000);} </style> <![endif]--> |