×

浅谈在不同浏览器下的透明问题

作者:Terry2013.07.31来源:Web前端之家浏览:15346评论:0
关键词:浏览器透明

浏览器下透明的那些事,经常会遇到,先前有同事问我,一直没来总结下,今天总算有点时间归纳下。针对不同的浏览器,使用css实现透明效果,可以使用不同的设置,大伙往下看呗!。

不同浏览器的私有属性:

IE使用私有属性filter:alpha(opacity),
Moz Family使用私有属性-moz-opacity,
而标准的属性是opacity(CSS 3, Moz Family部分支持CSS3)。

后面的数值是透明度,使用百分比或者小数,数值越小,透明度越高。

  1. filter:alpha(opacity=50); /* IE私有属性 */

  2. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/*IE8*/

  3. -moz-opacity:0.5; /* Firefox私有属性 */

  4. opacity: 0.5; /* 支持CSS3的浏览器(FF 1.5也支持)*/

在IE8中,-ms-filter是filter的别名,两者区别是-ms-filter的属相值必须被单引号或双引号包围,而filter中则不是必须;

而在IE8之前的版本中,filter的属性值必须不被单引号或双引号包围。

IE中的HTML元素要实现透明,则其必须具备layout,这样的元素有仅可读的属性hasLayout,且其值为true。

为了向下兼容和自己的私有属性让IE上实现元素透明有多种方式,IE团队推荐实现透明的方式是:

  1. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  2. filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);

  3. opacity: .5;

而目前简单最好用的实现方式是:

  1. filter:alpha(opacity=30);

  2. opacity:.3;

看完这个应该觉得很简单了吧,其实在我们做手机项目的时候,经常会遇到透明的问题,比如弹出层等。好拉,先写到这里吧~!

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/touming.html

网友评论文明上网理性发言已有0人参与

发表评论: