透明-----css的filter,opacity与css3的background-color: rgba

 先从问题出发:

现象:

今天在项目中发现一个在IE9下的bug,现象是IE9下背景为不透明,而在IE8,IE10以及firefox,chrome下都是正常的,如下图:

   

IE9的效果,背景为纯白色,


IE8,IE10,firefox,chrome的透明效果

调查过程:

1.查看代码:

css中对li标签设置的是

filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#BF494949,endColorstr=#BF494949);background-color:rgba(0, 0, 0, 0.3)

2.补习一下代码中相关知识

(只有真正了解了原代码,才能在针对原代码做自如的修改)

filter:progid:DXImageTransform.Microsoft.gradient(enabled=bEnabled,startColorStr= ,endColorStr= )


属性:
enabled:可选项。布尔值(Boolean)。设置或检索滤镜是否激活。 true | false
  true: 默认值。滤镜激活。
  false:滤镜被禁止。

startColorStr:可选项。字符串(String)。设置或检索色彩渐变的开始颜色和透明度。

  • 格式为 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 为十六进制正整数。
  •  取值范围为 00 - FF 。 RR 指定红色值, GG 指定绿色值, BB 指定蓝色值,AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范围的值将被恢复为默认值。 取值范围为 #FF000000 - #FFFFFFFF 。默认值为 #FF0000FF 。不透明蓝色。

EndColorStr:可选项。字符串(String)。设置或检索色彩渐变的结束颜色和透明度。参阅 startColorStr 属性。默认值为 #FF000000 。不透明黑色。

目前IE6-IE9都支持,包括IE9


background-color:rgba(0, 0, 0, 0.3)

这是css3的一个样式,

语法:

R:红色值。正整数 | 百分数

G:绿色值。正整数 | 百分数

B:蓝色值。正整数| 百分数

A:透明度。取值0~1之间

目前IE9以及IE9以上,firefox,chrome都支持。

可以参照给文章http://www.w3cplus.com/content/css3-rgba,比较详细。

3.问题找到了

由上面两个知识中发现,IE9是同时支持的,这就是说为什么IE8和IE10都正常,然后打开F12查看

而IE8和IE10分别支持其中一个。

接着在F12中将filter的样式去掉,发现效果是OK的;将filter勾选,然后将background-color去掉,发现透明效果不是很好,可见IE9对其支持度还不够。

接下来就是如何修改了。


  • 在html中常用的是条件注释,如:

<!--[if IE 9.0]>

  • 在js中又采用版本判断

if(navigator.appName=="Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g,"") == "MSIE9.0") 

  • 但现在是在css文件中去判断,思前想后用hack判断吧,因为IE9支持@media all所以采用以下的方式

@media all and (min-width:0) {

li{filter:progid:DXImageTransform.Microsoft.gradient(enabled='false',startColorstr=#BF494949,endColorstr}

将enabled改为false即可,这样在IE9就可以,而IE9以上及firefox,chrome因为不识别filter:progid,所以不做处理,从而达到兼容性。

4.额外透明的方法

  • opacity:取值范围是0-1,1代表不透明,如opacity(1);

问题:会造成不单该元素自身背景透明了,它的子元素会继承opacity属性,也会透明.

  • png-8的透明图片

问题:采用透明图片可以实现,但IE6下会有问题,同时图片相对js代码以及css来说,所需要的网络请求大,会影响页面的速度

5.调查该问题参考的文章:

http://www.w3cplus.com/content/css3-rgba

http://www.cnblogs.com/mizzle/archive/2012/04/05/2432752.html

http://www.footya.com/?action=show&id=114

http://angeldhp.iteye.com/blog/146612




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值