CSS实现元素透明的那些事
作者:秦歌 来源:随网之舞 发布时间:2009-09-07 12:22:00
CSS3草案中定义了{opacity:来声明元素的透明度,这已经得到了大多数现代浏览器的支持,而IE则很早通过特定的私有属性filter来实现的,所以HTML元素的透明效果已经无处不在了。首先看看A级浏览器所支持的用CSS实现元素透明的方案:
浏览器 | 最低 版本 | 方案 |
---|---|---|
Internet Explorer | 4.0 | filter: alpha(opacity=xx); |
5.5 | filter: progid:DXImageTransform.Microsoft.Alpha(opacity=xx); | |
8.0 | filter: "alpha(opacity=xx)"; filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=xx)"; -ms-filter: "alpha(opacity=xx)"; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=30)"; | |
Firefox (Gecko) | 0.9 (1.7) | opacity |
Opera | 9.0 | opacity |
Safari (WebKit) | 1.2 (125) | opacity |
实际上在IE8中,-ms-filter是filter的别名,两者区别是-ms-filter的属相值必须被单引号或双引号包围,而filter中则不是必须,而在IE8之前的版本中,filter的属性值必须不被单引号或双引号包围。
IE中的HTML元素要实现透明,则其必须具备layout,这样的元素有仅可读的属性hasLayout,且其值为true。具体情况如下:
body、img、table、tr、th、td等元素的hasLayout一直为true。
type为text、button、file或select的input的hasLayout一直为true。
设置{position:absolute}的元素的hasLayout为true
设置{float:left|right}的元素的hasLayout为true
设置{display:inline-block}的元素的hasLayout为true
设置{height:xx}或{width:xx}的元素必须具体以下两个条件之一,其hasLayout才能为true:
IE8兼容模式和IE8以前的浏览器中,在标准(strict)模式下其display的值是block,如demo3就不行。
元素在怪癖模式(compat mode)下。
设置了{zoom:xx}的元素在IE8的兼容模式或IE8之前的浏览器中其hasLayout为true,但在IE8的标准模式下则不会触发hasLayout。
设置了{writing-mode:tb-rl}的元素的hasLayout为true。
元素的contentEditable的属性值为true。
在IE8标准模式下设置了{display:block}的元素的hasLayout一直为true,如demo8。
关于hasLayout的更多详情可以看Exploring Internet Explorer “HasLayout” Overview和On having layout
从上面就可以看出IE实现HTML元素的透明如此混乱,为了向下兼容和自己的私有属性让IE上实现元素透明有多种方式,比如CSS Opacity实例中的demo1到demo8,虽然IE团队推荐实现透明的方式是:
{ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: .5;}
而目前简单最好用的实现方式是如CSS Opacity中demo4这样:
{ filter:alpha(opacity=30); opacity:.3;}
实际上目前最流行的JavaScript框架的设置样式方法都是应用这种方式,并且针对IE设置了{zoom:1}来让元素的hasLayout为true,但在IE8的标准模式下zoom并不能触发hasLayout,所以利用它们设置hasLayout为false的元素的透明度时在IE8的标准模式下是失败的,这个bug在YUI、Prototype、jQuery和Mootools的最新版本中都存在,具体请在IE8标准模式下看demo9到demo11。同样由于在IE8中设置透明度的方式多种多样,所以利用JavaScript获取HTML元素的透明度值需要考虑多种情况,YUI完美解决了这个问题,Prototype比jQuery稍微周全一点,而Mootools直接是bug,具体可以在IE下看demo1到demo8的演示。从这个角度给4个框架来个排名的话,YUI第一、Prototype第二、jQuery第三、Mootools垫底。
我简单的实现了设置和获取Opacity的函数,可以避开上面框架存在的bug,请在IE8标准模式下看demo12:
//设置CSS opacity 属性的函数,解决IE8的问题var setOpacity = function(el,i){ if(window.getComputedStyle){// for non-IE el.style.opacity = i; }else if(document.documentElement.currentStyle){ // for IE if(!el.currentStyle.hasLayout){ el.style.zoom = 1; } if(!el.currentStyle.hasLayout){ //在IE8中zoom不生效,所以再次设置inline-block el.style.display = 'inline-block'; } el.style.filter = 'alpha(opacity='+ i * 100 +')'; }}//获取CSS opacity 属性值的函数//借鉴自http://developer.yahoel.com/yui/docs/YAHOO.util.Dom.html#method_getStylevar getOpacity = function(el){ var value; if(window.getComputedStyle){ value = el.style.opacity; if(!value){ value = el.ownerDocument.defaultView.getComputedStyle(el,null)['opacity']; } return value; }else if(document.documentElement.currentStyle){ value = 100; try { // will error if no DXImageTransform value = el.filters['DXImageTransform.Microsoft.Alpha'].opacity; } catch(e) { try { // make sure its in the document value = el.filters('alpha').opacity; } catch(err) { } } return value / 100; }}
不得不说,这些事都是IE整出来的……
猜你喜欢
- 各人觉得这些LOGO的设计都很好,简洁,明了,大方。特整理出来与大家分享,希望能吸取设计经验。asp之家祝愿各位09年身体健康,万事如意,网
- Blog的全名应该是Web log,中文意思是“网络日志”,后来缩写为Blog,而博客(Blogger)就是写Blog的人。从理解上讲,博客
- 你是否曾经想在数据库中存储一个日期而没有时间部分,或者想存储一个时间值希望有更高的精度?在SQL Server 2008的介绍中,微软介绍了
- 我们用下了asp代码简单统计了下载一个文件需要的时间:<%Function DownloadTime(intFileSize
- 代码如下:<title>雷锋|优酷-专辑 采集程序</title></head> &
- 在Perfection kills上看到他去年写的一篇文章,关于HTML优化的,讲的很详细,姑且记录之,尽管里面有些东西并不能在目前的环境里
- 页面大小、窗口大小和滚动条位置这三个数值在不同的浏览器例如Firefox和IE中有着不同的实现。即使在同一种浏览器例如IE中,不同版本也有不
- 1.建表代码如下:-- Create table create table test ( dm1 char(3), dm2 char(3),
- 早就想用一个系列的文章来写AJAX,让自己头到尾理一遍,更好的掌握基础知识(昨天的面试受打击了,基础知识很重要).要是写的好,也许也可以帮助
- 最近被“模块化”缠身,又是文章又是PPT的,被逼着想了很多相关的东西。整理下我这段时间对于“模块化”的思考,大多都是我自己从事页面重构这份工
- 通常情况下,即使MyISAM表格式非常可靠(SQL语句对表做的所有改变在语句返回之前被写下),如果下列任何事件发生,你依然可以获得损坏的表:
- 是否应该开启缓冲器? 通过脚本程序启动缓冲器 在ASP脚本的顶部包含Response.Buffer=True ,IIS就会将页面的内容缓存。
- 只添加了一些自己想到的常用的功能,欢迎大家补充添加自己的好的思路. 通用的正则和方法可以写在RegExpObj中,
- 您可以使用 ObjectContext 对象提交或放弃一项由 Microsoft Transaction Server (MTS) 管理的事
- 在这种配置下我们要实现关键词不区分大小写搜索并高亮显示要借助ASP的正则处理了,请看下面代码:<% Function&nbs
- 今天下午,低一度博客受到攻击了,出现了大约一个小时的访问异常。庆幸的是,这帮无耻歹徒没能成功获取我的Access数据库,而只是象征性地给我注
- 今天在一个QQ群中看到有人在问一个进度条的实现方式,当时因为工作时间,需求相对也比较紧,只是简单的说了一下可以通过CSS的边框属性和背景属性
- ASP开发中有用的function集合,挺有用处的!希望大家保留!<% '**
- 在编程时你一定碰到过时间触发的事件,在VB中有timer控件,而asp中没有, 假如你要不停地查询数据库来等待一个返回结果的话,我想你一定知
- 设计师不等于美工设计无所不在,但大多数企业不知道如何使用它。现代设计进入中国大概是二十多年的时间,而在国外,尤其在美国在欧洲,大概有一百年的