css实现html透明效果

最新推荐文章于 2024-07-16 09:54:37 发布

baiqin1974

最新推荐文章于 2024-07-16 09:54:37 发布

阅读量322

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/superMarioli/archive/2009/10/16/3683763.html

版权

CSS3草案中定义了{opacity: | inherit;}来声明元素的透明度，这已经得到了大多数现代浏览器的支持，而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：
1. IE8兼容模式和IE8以前的浏览器中，在标准(strict)模式下其display的值是block，如demo3就不行。
2. 元素在怪癖模式（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_getStyle
var 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;
  }
}

附:弹出注册框实例

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf8" /> 
<title>弹出提示</title> 
<mce:style><!--
 
* {margin:0;padding:0;font-size:12px;} 
html,body {height:100%;width:100%;} 
#content {background:#f8f8f8;padding:30px;height:100%;} 
#content a {font-size:30px;color:#369;font-weight:700;} 
#alert {border:1px solid #369;width:300px;height:150px;background:#e2ecf5;z-index:1000;position:absolute;display:none;} 
#alert h4 {height:20px;background:#369;color:#fff;padding:5px 0 0 5px;} 
#alert h4 span {float:left;} 
#alert h4 span#close {margin-left:210px;font-weight:500;cursor:pointer;} 
#alert p {padding:12px 0 0 30px;} 
#alert p input {width:120px;margin-left:20px;} 
#alert p input.myinp {border:1px solid #ccc;height:16px;} 
#alert p input.sub {width:60px;margin-left:30px;} 
--></mce:style><style mce_bogus="1"> 
* {margin:0;padding:0;font-size:12px;} 
html,body {height:100%;width:100%;} 
#content {background:#f8f8f8;padding:30px;height:100%;} 
#content a {font-size:30px;color:#369;font-weight:700;} 
#alert {border:1px solid #369;width:300px;height:150px;background:#e2ecf5;z-index:1000;position:absolute;display:none;} 
#alert h4 {height:20px;background:#369;color:#fff;padding:5px 0 0 5px;} 
#alert h4 span {float:left;} 
#alert h4 span#close {margin-left:210px;font-weight:500;cursor:pointer;} 
#alert p {padding:12px 0 0 30px;} 
#alert p input {width:120px;margin-left:20px;} 
#alert p input.myinp {border:1px solid #ccc;height:16px;} 
#alert p input.sub {width:60px;margin-left:30px;} </style>

</head>

<body> 
aa
<div id="content"> 
<a href="#" mce_href="#" style="position:absolute; top:50%; left:50%">注册</a> 
</div> 
<div id="alert"> 
<h4><span>现在注册</span><span id="close">关闭</span></h4> 
<p><label>用户名</label><input type="text" class="myinp" οnmοuseοver="this.style.border='1px solid #f60'" onfoucs="this.style.border='1px solid #f60'" οnblur="this.style.border='1px solid #ccc'" /></p> 
<p><label>密　码</label><input type="password" class="myinp" οnmοuseοver="this.style.border='1px solid #f60'" onfoucs="this.style.border='1px solid #f60'" οnblur="this.style.border='1px solid #ccc'" /></p> 
<p><input type="submit" value="注册" class="sub" /><input type="reset" value="重置" class="sub" /></p> 
</div> 
<mce:script type="text/javascript"><!--
 
var myAlert = document.getElementById("alert"); 
var reg = document.getElementById("content").getElementsByTagName("a")[0]; 
var mClose = document.getElementById("close"); 
reg.onclick = function() 
{ 
myAlert.style.display = "block"; 
myAlert.style.position = "absolute"; 
myAlert.style.top = "50%"; 
myAlert.style.left = "50%"; 
myAlert.style.marginTop = "-75px"; 
myAlert.style.marginLeft = "-150px";

mybg = document.createElement("div"); 
mybg.setAttribute("id","mybg"); 
mybg.style.background = "#E0ECF8"; 
mybg.style.width = "100%"; 
mybg.style.height = "100%"; 
mybg.style.position = "absolute"; 
mybg.style.top = "0"; 
mybg.style.left = "0"; 
mybg.style.zIndex = "500"; 
mybg.style.opacity = "0.3"; 
mybg.style.filter = "Alpha(opacity=30)"; 
document.body.appendChild(mybg);

document.body.style.overflow = "hidden"; 
}

mClose.onclick = function() 
{ 
myAlert.style.display = "none"; 
mybg.style.display = "none"; 
} 
// --></mce:script> 
</body> 
</html>

转载于:https://www.cnblogs.com/superMarioli/archive/2009/10/16/3683763.html