html代码很简单 <div class="mask opacity"></div>
1 、半透明效果可以使用 css3 中的 opacity 属性，在低版本的IE浏览器中使用IE的alpha 滤镜。代码:
.opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000; }
2 、要覆盖整个可视区域通常的做法是:
html,body{ height:100%} .mask{height:100%;width:100%;}
但是这样做当内容超过一屏时只有IE6下显示的效果是我们所期望的，在其他浏览器中首屏以下的没能被遮盖住，原因是IE6中元素初始包含块为<body>,其他浏览器中初始包含块为<html>。在这个例子中绝对定位元素.mask的包含块为初始包含块。在标准浏览器中mask的高度为<html>高度，我们设置的html元素的height:100%即视口的高度。所以在这里.mask的高度计算值也为视口的高度。而对于IE6来说.mask的包含块为<body>。<body>的高随着页面中内容高度的增加而增加。所以能够遮住首屏以下内容。 为了兼容其他浏览器我们可以使用position:fixed; 来解决这个问题
更新：2012.11.8
当内容超过一屏时内容只有在IE6能被遮盖住，原因是在CSS中使用的滤镜属性，如果把这个属性去掉表现和其他浏览器一样。
完整的代码:
<div class="mask opacity"></div>
html,body{ height:100%; margin:0; padding:0}
.mask{height:100%; width:100%; position:fixed; _position:absolute; top:0; z-index:1000; }
.opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000; }
by rentj1@gmail.com @新浪微博
参考资料：
扫一扫
4297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
