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

2024-07-11 08:47:57

字体：大中小

来源：转载

供稿：网友

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

完整的代码:

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

一个实际的代码例子：

复制代码

上一篇：编写出色CSS代码的13个建议小结

下一篇：用CSS实现的图片透明度链接效果代码