移动端H5页面遮罩层

Posted 2020-12-06 zzz-knight

1.建一个遮罩层div

<div id="cover"></div>

2.设置遮罩层样式

#cover {
    position: absolute;
    left: 0px;
    top: 0px;
    background: rgba(0, 0, 0, 0.5);
    width: 100%; /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
    height: 100%;
    filter: alpha(opacity=100); /*设置透明度为100%*/
    opacity: 1; /*非IE浏览器下设置透明度为100%*/
    display: block;
    z-Index: 999;
}

3.设置不遮罩部分的z-index

<div style="width: 85%;z-index:9999;height:85%;background-color: #f0f0f0">
</div>

4.效果图

 

 

参考链接:https://www.cnblogs.com/wangshishuai/p/10097860.html