IE兼容opacity

2018-02-07 10:34:46来源:http://570109268.iteye.com作者:青春..荒唐人点击

分享
第七城市

【引文】

CSS3的透明度属性opacity想必大家都已经用的无处不在了。而对于不支持CSS3的浏览器如何进行透明处理,保持浏览器效果的一致,这个估计谁都会写,但是涉及到filter的具体语法含义和各版本写法的不同区别,很多人都搞不准确,我曾经问过许多群里的大牛,说的都不是很准确,网上的说法就更五花八门了。今天呢,主要是重新温习一下这个属性,并实际测试来说明正确的写法,和IE各版本的支持度和书写区别。

 

【兼容性】

IE9+和目前其他主流浏览器 Opera 9.0+,Safari  1.2(WebKit 125) +,chrome等等都支持opacity这个透明度属性

 

【简介】

首先,Opacity属性用来设置一个元素的透明度,取值范围是0~1之间,不可为负值。opacity取值为1是完全不透明,取值为0是完全透明,视觉上看不见

关于浏览器对opacity属性的兼容性请继续往下看:

①IE9+才开始支持CSS3 opacity,而对IE6-IE8我们习惯使用filter滤镜属性来进行实现。IE4-IE9都支持滤镜写法progid:DXImageTransform.Microsoft.Alpha(Opacity=xx).

②IE8又引入了特殊的-ms-filter,IE认为这种写法是对旧写法的一次更正,更符合规范,这个写法的属性值只是多了一对引号,效果同前。不过,这种写法的寿命也不长,到IE10对filter与-ms-filter都已经不再支持。

③Safari 1.2之前的版本,是基于khtml的浏览器内核,1.2版发布后,不再支持-khtml-opacity的写法,-khtml-opacity也随之成为历史

 

【案例解析】

下面通过一个例子来测试filter和opacity的兼容性:

<!DOCTYPE html>  <html>  <head>  <meta charset=utf-8 />  <title>JS Bin</title>  </head>  <body>    <div >测试透明度</div>  </body>  </html>  

 

.transparent_class {      /* Required for IE 5, 6, 7 */      /* ...or something to trigger hasLayout, like zoom: 1; */      width:300px;      height:300px;      line-height:300px;      text-align:center;      background:#000;      color:#fff;      /* older safari/Chrome browsers */      -webkit-opacity: 0.5;      /* Netscape and Older than Firefox 0.9 */      -moz-opacity: 0.5;      /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/      -khtml-opacity: 0.5;      /* IE9 + etc...modern browsers */      opacity: .5;      /* IE 4-9 */      filter:alpha(opacity=50);      /*This works in IE 8 & 9 too*/      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";      /*IE4-IE9*/      filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);  }  

 【使用事项】

①使用中,我们可以根据要适配的浏览器/版本,从上面选择自己需要的代码行。如果要全面支持所有浏览器,至少需要有关opacity或filter的前5句

②顺序:

如果你要同时使用filter和-ms-filter,请将-ms-filter写在filter的前面。原文描述如下

If you don’t use this order, IE8 emulating IE7 doesn’t apply the opacity, although IE8 and IE7 native do.

翻译为(如果你不使用这个命令,IE8模拟IE7不适用不透明,尽管IE8和IE7本地做)

 

 

 

 

 

.

第七城市

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台