CSS实现HTML元素透明的那些事

CSS是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。HTML即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。

CSS3草案中定义了

 
 
 
 
    
  
  
  
  
  1. {opacity: | inherit;} 
    2.

来声明元素的透明度，这已经得到了大多数现代浏览器的支持，而IE则很早通过特定的私有属性filter来实现的，所以HTML元素的透明效果已经无处不在了。首先看看A级浏览器所支持的用CSS实现元素

实际上在IE8中，-ms-filter是filter的别名，两者区别是-ms-filter的属相值必须被单引号或双引号包围，而filter中则不是必须，而在IE8之前的版本中，filter的属性值必须不被单引号或双引号包围。

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

1.body、img、table、tr、th、td等元素的hasLayout一直为true。

2.type为text、button、file或select的input的hasLayout一直为true。

3.设置{position:absolute}的元素的hasLayout为true

4.设置{float:left|right}的元素的hasLayout为true

5.设置{display:inline-block}的元素的hasLayout为true

6.设置{height:xx}或{width:xx}的元素必须具体以下两个条件之一，其hasLayout才能为true：

a.IE8兼容模式和IE8以前的浏览器中，在标准(strict)模式下其display的值是block，如demo3就不行。

b.元素在怪癖模式（compat mode）下。

7.设置了{zoom:xx}的元素在IE8的兼容模式或IE8之前的浏览器中其hasLayout为true，但在IE8的标准模式下则不会触发hasLayout。

8.设置了{writing-mode:tb-rl}的元素的hasLayout为true。

9.元素的contentEditable的属性值为true。

10.在IE8标准模式下设置了{display:block}的元素的hasLayout一直为true，如demo8。

从上面就可以看出IE实现HTML元素的透明如此混乱，为了向下兼容和自己的私有属性让IE上实现元素透明有多种方式，比如CSS Opacity实例中的demo1到demo8，虽然IE团队推荐实现透明的方式是：

 
 
 
 
    
  
  
  
  
  1. {  
    2. 
  
  
  
  
  2. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  
    3. 
  
  
  
  
  3. filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);  
    4. 
  
  
  
  
  4. opacity: .5;  
    5. 
  
  
  
  
  5. } 
    6.

而目前简单***用的实现方式是如CSS Opacity中demo4这样：

 
 
 
 
    
  
  
  
  
  1. {  
    2. 
  
  
  
  
  2. filter:alpha(opacity=30);  
    3. 
  
  
  
  
  3. opacity:.3;  
    4. 
  
  
  
  
  4. } 
    5.

实际上目前***的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：

 
 
 
 
    
  
  
  
  
  1. //设置CSS opacity 属性的函数，解决IE8的问题  
    2. 
  
  
  
  
  2. var setOpacity = function(el,i){  
    3. 
  
  
  
  
  3. if(window.getComputedStyle){// for non-IE  
    4. 
  
  
  
  
  4. el.style.opacity = i;  
    5. 
  
  
  
  
  5. }else if(document.documentElement.currentStyle){ // for IE  
    6. 
  
  
  
  
  6. if(!el.currentStyle.hasLayout){  
    7. 
  
  
  
  
  7. el.style.zoom = 1;  
    8. 
  
  
  
  
  8. }  
    9. 
  
  
  
  
  9. if(!el.currentStyle.hasLayout){ //在IE8中zoom不生效，所以再次设置inline-block 
    10. 
  
  
  
  
  10. el.style.display = 'inline-block';  
    11. 
  
  
  
  
  11. }  
    12. 
  
  
  
  
  12. try{  
    13. 
  
  
  
  
  13. //测试是否已有filter  
    14. 
  
  
  
  
  14. //http://msdn.microsoft.com/en-us/library/ms532847%28VS.85%29.aspx  
    15. 
  
  
  
  
  15. if(el.filters){  
    16. 
  
  
  
  
  16. if(el.filters('alpha')){  
    17. 
  
  
  
  
  17. el.filters('alpha').opacity = i * 100;  
    18. 
  
  
  
  
  18. }else{  
    19. 
  
  
  
  
  19. el.style.filter += 'alpha(opacity='+ i * 100 +')';  
    20. 
  
  
  
  
  20. }  
    21. 
  
  
  
  
  21. }  
    22. 
  
  
  
  
  22. }catch(e){  
    23. 
  
  
  
  
  23. el.style.filter = 'alpha(opacity='+ i * 100 +')';  
    24. 
  
  
  
  
  24. }  
    25. 
  
  
  
  
  25. }  
    26. 
  
  
  
  
  26. }  
    27. 
  
  
  
  
  27. //获取CSS opacity 属性值的函数  
    28. 
  
  
  
  
  28. //借鉴自http://developer.yahoel.com/yui/docs/YAHOO.util.Dom.html#method_getStyle  
    29. 
  
  
  
  
  29. var getOpacity = function(el){  
    30. 
  
  
  
  
  30. var value;  
    31. 
  
  
  
  
  31. if(window.getComputedStyle){  
    32. 
  
  
  
  
  32. value = el.style.opacity;  
    33. 
  
  
  
  
  33. if(!value){  
    34. 
  
  
  
  
  34. value = el.ownerDocument.defaultView.getComputedStyle(el,null)['opacity'];  
    35. 
  
  
  
  
  35. }  
    36. 
  
  
  
  
  36. return value;  
    37. 
  
  
  
  
  37. }else if(document.documentElement.currentStyle){  
    38. 
  
  
  
  
  38. value = 100;  
    39. 
  
  
  
  
  39. try { // will error if no DXImageTransform  
    40. 
  
  
  
  
  40. value = el.filters['DXImageTransform.Microsoft.Alpha'].opacity;  
    41. 
  
  
  
  
  41. } catch(e) {  
    42. 
  
  
  
  
  42. try { // make sure its in the document  
    43. 
  
  
  
  
  43. value = el.filters('alpha').opacity;  
    44. 
  
  
  
  
  44. } catch(err) {  
    45. 
  
  
  
  
  45. }  
    46. 
  
  
  
  
  46. }  
    47. 
  
  
  
  
  47. return value / 100;  
    48. 
  
  
  
  
  48. }  
    49. 
  
  
  
  
  49. } 
    50.

不得不说，这些事都是IE整出来的……

原文链接：http://dancewithnet.com/2009/09/06/css-opacity/

【编辑推荐】

  1. Web移动应用 HTML5 CSS和JavaScript
  2. div+css牛人也得看的15个css
  3. 非常优秀的jQuery+CSS实现动态导航菜单教程
  4. 10 个漂亮的 CSS3 表单制作教程
  5. 3款新鲜的CSS3&HTML5框架

网页名称：CSS实现HTML元素透明的那些事
分享链接：http://www.shufengxianlan.com/qtweb/news23/360073.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站设计知识

分类信息网站

网站建设方案　　 　网站seo优化　　 　成都网站建设　　 　关键词优化　　 　成都恒翔机电维修　　 　彭州网站建设　　 　成都标识标牌设计制作　　 　成都网站制作　　 　全网营销网站推广　　 　乐山主机托管　　 　成都门窗定制　　 　资阳网站建设　　 　网站运营　　 　四川德阳主机托管　　 　香港空间腾讯云　　 　香港云服务器租用　　 　德阳电信机房　　 　成发金汇　　 　德阳电信服务器托管　　 　成都网站推广