加载中…
个人资料
糖炒栗子
糖炒栗子
  • 博客等级:
  • 博客积分:0
  • 博客访问:32,585
  • 关注人气:13
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
相关博文
推荐博文
谁看过这篇博文
加载中…
正文 字体大小:

IE, FireFox, Opera 浏览器支持CSS实现Alpha半透明的方法

(2013-12-31 15:27:06)
分类: div css
这个世界变化很快,IE8 IE10 IE11也出来了,它将不在支持以前{filter:alpha(opacity=50);}的私有属性,转而支持更规范的私有属性 -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;加之Firefox2.0和 Opera9.0以前版本很少见到,所以所有的主流浏览器都已经支持纯CSS而不用png图片来实现半透明效果,代码是:
IE, <wbr>FireFox, <wbr>Opera <wbr>浏览器支持CSS实现Alpha半透明的方法

1、对于IE使用filter,对于非IE浏览器使用png背景图填充

先请看如下代码:

IE, <wbr>FireFox, <wbr>Opera <wbr>浏览器支持CSS实现Alpha半透明的方法

简单解释,IE使用私有属性filter:alpha(opacity),Moz Family使用私有属性-moz-opacity,而标准的属性是opacity(CSS 3, Moz Family部分支持CSS3)。后面的数值是透明度,使用百分比或者小数(alpha(opacity))使用大于0小于100的数值,其实也是百分比,但是需要注意的是,IE下使用期私有属性生效必需触发haslayout,比如设置容器宽度,最通用的方案是{zoom:1;}但是要注意的是,IE下使其私有属性生效必须触发其hasLayout,比如设置容器宽度,最通用的方案是{zoom:1}。但是需要注意的是,IE下使其私有属性生效必须触发其hasLayout,比如设置容器宽度,最通用的方案是{zoom:1}。)。

从上面的代码中你没有看到Opera。没错,Opera还未支持标准的opacity从Opera9开始支持CSS3的opacity了,也没有其私有的可支持Alpha透明的属性。

但是,我们知道,Opera是支持Alpha透明的PNG图片的(当然Moz Family也支持)。所以我们可以使用背景图片来实现Alpha透明效果。

例子:http://www.omemo.net/neo/lab/alpha/

关键在于:

IE, <wbr>FireFox, <wbr>Opera <wbr>浏览器支持CSS实现Alpha半透明的方法

既然Moz Family支持Alpha透明的PNG,所以我们没有必要使用其私有属性了。当然,你可以使用标准的opacity,但别同时使用Alpha透明图片和 opacity,这样的话就成了两者的混合了。你可以把上面的例子下载过来,然后的注释看看。

这部分内容来自于:http://www.omemo.net/neo/blog/?p=87


2、如想实现父标签透明,而子标签不透明,采用对于采用png透明的父标签来说不存在问题,如果采用alpha值无论ie还是非ie都存在这样的问题,css声明了position透明标签包含的内容都透明。

例如:

IE, <wbr>FireFox, <wbr>Opera <wbr>浏览器支持CSS实现Alpha半透明的方法

这个时候看到in也是透明的

hack方法:增加一个子标签,采用css hack 使其在ie下充满整个父标签,并使其透明,由于透明部分和不透明部分是兄弟关系,所以不影响。

IE, <wbr>FireFox, <wbr>Opera <wbr>浏览器支持CSS实现Alpha半透明的方法

该想法来自于http://www.webmasterworld.com/forum83/3529.htm

0

阅读 评论 收藏 转载 喜欢 打印举报/Report
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 电话:4000520066 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有