html半透明遮罩,div背景半透明 覆盖整个可视区域的遮罩层效果

html代码很简单

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下显示的效果是我们所期望的，在其他浏览器中首屏以下的没能被遮盖住，为了兼容其他浏览器我们可以使用position:fixed; 来解决这个问题

完整的代码:

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; }

一个实际的代码例子：

复制代码代码如下:

背景半透明覆盖整个可视区域

html,body{ height:100%; margin:0; padding:0; font-size:14px;}

p{ line-height:18px;}

.mask{height:100%; width:100%; position:fixed; _position:absolute; top:0; z-index:1000; }

.opacity{ opacity:0.3; filter: alpha(opacity=