浏览器下透明的那些事,经常会遇到,先前有同事问我,一直没来总结下,今天总算有点时间归纳下。针对不同的浏览器,使用css实现透明效果,可以使用不同的设置,大伙往下看呗!。
不同浏览器的私有属性:
IE使用私有属性filter:alpha(opacity),
Moz Family使用私有属性-moz-opacity,
而标准的属性是opacity(CSS 3, Moz Family部分支持CSS3)。
后面的数值是透明度,使用百分比或者小数,数值越小,透明度越高。
filter:alpha(opacity=50); /* IE私有属性 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/*IE8*/
-moz-opacity:0.5; /* Firefox私有属性 */
opacity: 0.5; /* 支持CSS3的浏览器(FF 1.5也支持)*/
在IE8中,-ms-filter是filter的别名,两者区别是-ms-filter的属相值必须被单引号或双引号包围,而filter中则不是必须;
而在IE8之前的版本中,filter的属性值必须不被单引号或双引号包围。
IE中的HTML元素要实现透明,则其必须具备layout,这样的元素有仅可读的属性hasLayout,且其值为true。
为了向下兼容和自己的私有属性让IE上实现元素透明有多种方式,IE团队推荐实现透明的方式是:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity: .5;
而目前简单最好用的实现方式是:
filter:alpha(opacity=30);
opacity:.3;
看完这个应该觉得很简单了吧,其实在我们做手机项目的时候,经常会遇到透明的问题,比如弹出层等。好拉,先写到这里吧~!
网友评论文明上网理性发言已有0人参与
发表评论: