CSS实现HTML元素透明的那些事
作者:秦歌 来源:随网之舞 发布时间:2010-02-01 12:34: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)"; | |
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(我已经给YUI团队提交了这个bug,他们会在下个版本修复,最新的2.8.0中依旧存在,期待2.9.0吧)、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'; } try{ //测试是否已有filter //http://msdn.microsoft.com/en-us/library/ms532847%28VS.85%29.aspx if(el.filters){ if(el.filters('alpha')){ el.filters('alpha').opacity = i * 100; }else{ el.style.filter += 'alpha(opacity='+ i * 100 +')'; } } }catch(e){ 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整出来的……
猜你喜欢
- 一、问题引发思考前阵子与同事探讨一个小需求时又遇到了按钮表示“动作”和表示“状态”间矛盾问题。想想这个问题多年前已经开始讨论了,所以在此整理
- 首先,建一个文件夹,把你要隐藏的文件放在里面,你的所有黑客程序什么的。假设你建的文件夹叫hacker然后呢,我们给这个文件夹加个扩展名(后缀
- 由于 window.onload 事件需要在页面所有内容(包括图片等)加载完后,才执行,但往往我们更希望在 DOM 一加载完就执行脚本。其实
- 在Web开发的时候,经常会遇到的一种情况就是浏览器提示脚本运行时间过长,停止还是继续,无论你选择什么,相信你都会想尽一切办法让这个对话框远离
- JavaScript图片水平翻转后垂直翻反转的特效一:<!--把下列代码加到body区域内--><SCRIPT langu
- 在日常的工作中,保护数据免受未授权用户的侵犯是系统管理员特别关心的问题。如果你目前用的是MySQL,就可以使用一些方便的功能来保护系统,来大
- 保持良好的代码风格是每个Coder必学的课程,同样在HTML设计的时候也要特别注意代码的规范性,虽然说不规范的代码不会直接造成严重的后果,但
- AdobeAdobe公司的标识1982年,40多岁的程序员约翰·沃诺克(John Warnock)和查尔斯·杰斯克(Charles Gesc
- 新一代W3C,xhtml代码规范,大家在设计网站的时候务必遵循这一规范 ,这将对网站的优化,网站的推广,搜索引擎的友好
- Cookie简介首先,我们对Cookie做一个简单的介绍,说明如何利用ASP来维护cookie。Cookie是存储在客户端计算机中的一个小文
- 本文介绍了保护MySQL数据库中重要数据受外部攻击的六个注意事项,以减少面临的风险。与自动的数据库备份不同,对系统管理员来说,保护数据免受未
- function getBytesLength(str){ var re=/[\x00-\xf
- 这个可应用于所有浏览器中.<SCRIPT language=javascript>var leave=true; functio
- 网页编程中,在与数据库打交道的时候我们经常会碰到乱码的经常。本文就将介绍一种ASP读取MySQL数据库出现乱码的解决办法。情景再现:使用My
- 这个是我在蓝色看到的,楼主想实现图片按比例缩放的功能(缩略图),把图片固定在一定的宽高范围内,不会变形,失真。例如:缩略图的框是94px*9
- http://swik.net/Ajax/Ajax+Mistakes在某网站瞎逛时,发现这个链接,进去逛了逛,觉得很有意思,大家也可以去看看
- 代码如下:create table T_NEWS ( ID NUMBER, N_TYPE VARCHAR2(20), N_TIT
- 开源的MySQL并不能取代非共享的私有数据库在企业中的应用,于是这些开源数据库的支持者们想把解决Web应用程序开发工具的可扩展性问题看作是获
- 用QQ聊过天的朋友都对它的自动隐藏窗口功能爱不释手,它可以使窗口显得清爽整洁而且富有动感,笔者的几个朋友都想在自己的网页中加入类似的东东,经
- 启动sql server Net Start MSSqlServer 暂停sql server Net Pause MSSqlServer