您的位置：首页 > Web前端 > CSS

css实现html透明效果

2009-10-16 15:42 691 查看
CSS3草案中定义了
{opacity:|inherit;}
来声明元素的透明度，这已经得到了大多数现代浏览器的支持，而IE则很早通过特定的私有属性
filter
来实现的，所以HTML元素的透明效果已经无处不在了。首先看看A级浏览器所支持的用CSS实现元素透明的方案：

浏览器最低
版本		方案
InternetExplorer4.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
Opera9.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就不行。

元素在怪癖模式（compatmode）下。

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

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

元素的
contentEditable
的属性值为
true
。

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

关于hasLayout的更多详情可以看ExploringInternetExplorer“HasLayout”Overview和Onhavinglayout

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

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

而目前简单最好用的实现方式是如CSSOpacity中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：

//设置CSSopacity属性的函数，解决IE8的问题
varsetOpacity=function(el,i){
if(window.getComputedStyle){//fornon-IE
el.style.opacity=i;
}elseif(document.documentElement.currentStyle){//forIE
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+')';
}
}
}

//获取CSSopacity属性值的函数
//借鉴自http://developer.yahoel.com/yui/docs/YAHOO.util.Dom.html#method_getStyle
vargetOpacity=function(el){
varvalue;
if(window.getComputedStyle){
value=el.style.opacity;
if(!value){
value=el.ownerDocument.defaultView.getComputedStyle(el,null)['opacity'];
}
returnvalue;
}elseif(document.documentElement.currentStyle){
value=100;
try{//willerrorifnoDXImageTransform
value=el.filters['DXImageTransform.Microsoft.Alpha'].opacity;
}catch(e){
try{//makesureitsinthedocument
value=el.filters('alpha').opacity;
}catch(err){
}
}
returnvalue/100;
}
}

附:弹出注册框实例

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-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%;}
#contenta{font-size:30px;color:#369;font-weight:700;}
#alert{border:1pxsolid#369;width:300px;height:150px;background:#e2ecf5;z-index:1000;position:absolute;display:none;}
#alerth4{height:20px;background:#369;color:#fff;padding:5px005px;}
#alerth4span{float:left;}
#alerth4span#close{margin-left:210px;font-weight:500;cursor:pointer;}
#alertp{padding:12px0030px;}
#alertpinput{width:120px;margin-left:20px;}
#alertpinput.myinp{border:1pxsolid#ccc;height:16px;}
#alertpinput.sub{width:60px;margin-left:30px;}
--></mce:style><stylemce_bogus="1">
*{margin:0;padding:0;font-size:12px;}
html,body{height:100%;width:100%;}
#content{background:#f8f8f8;padding:30px;height:100%;}
#contenta{font-size:30px;color:#369;font-weight:700;}
#alert{border:1pxsolid#369;width:300px;height:150px;background:#e2ecf5;z-index:1000;position:absolute;display:none;}
#alerth4{height:20px;background:#369;color:#fff;padding:5px005px;}
#alerth4span{float:left;}
#alerth4span#close{margin-left:210px;font-weight:500;cursor:pointer;}
#alertp{padding:12px0030px;}
#alertpinput{width:120px;margin-left:20px;}
#alertpinput.myinp{border:1pxsolid#ccc;height:16px;}
#alertpinput.sub{width:60px;margin-left:30px;}</style>

</head>

<body>
aa
<divid="content">
<ahref="#"mce_href="#"style="position:absolute;top:50%;left:50%">注册</a>
</div>
<divid="alert">
<h4><span>现在注册</span><spanid="close">关闭</span></h4>
<p><label>用户名</label><inputtype="text"class="myinp"onmouseover="this.style.border='1pxsolid#f60'"onfoucs="this.style.border='1pxsolid#f60'"onblur="this.style.border='1pxsolid#ccc'"/></p>
<p><label>密　码</label><inputtype="password"class="myinp"onmouseover="this.style.border='1pxsolid#f60'"onfoucs="this.style.border='1pxsolid#f60'"onblur="this.style.border='1pxsolid#ccc'"/></p>
<p><inputtype="submit"value="注册"class="sub"/><inputtype="reset"value="重置"class="sub"/></p>
</div>
<mce:scripttype="text/javascript"><!--

varmyAlert=document.getElementById("alert");
varreg=document.getElementById("content").getElementsByTagName("a")[0];
varmClose=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>


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航