遮盖层覆盖整个页面

最新推荐文章于 2021-06-07 16:41:14 发布

peihong19900420

最新推荐文章于 2021-06-07 16:41:14 发布

阅读量1.5k

点赞数

分类专栏：技术类文章标签： html css

本文链接：https://blog.csdn.net/peihong19900420/article/details/84731799

版权

技术类专栏收录该内容

30 篇文章 0 订阅

订阅专栏

html代码:
<body topmargin="0">

<div class="main">
网页主体内容，包含网页其他栏目
</div>

<div class="mask"></div>
<div class="opendiv" >
最上层DIV覆盖下面的全部DIV
</div>
</body>

css代码：

.main { width:960px; height:800px; background-color:#FF9966; margin:0px auto;}
.mask{ z-index:900;[color=red] position:fixed!important;[/color] position:absolute; left:0px; top:0px; width:100%; height:100%; background:#000; filter: alpha(opacity=45); opacity: 0.45; -moz-opacity: 0.45; -khtml-opacity: 0.45; }

.opendiv{z-index:920;position:absolute;left:50%; top:50%; margin-left:-175px; margin-top:-125px; width:334px; height:180px; background-color: #6699FF; text-align:center; padding-top:20px;}

注：position:fixed!important;这个地方很重要