码迷,mamicode.com
首页 > 移动开发 > 详细

移动端H5页面遮罩层

时间:2020-05-26 15:07:58      阅读:229      评论:0      收藏:0      [点我收藏+]

标签:width   filter   opacity   z-index   lte   class   隐藏   idt   样式   

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

 

移动端H5页面遮罩层

标签:width   filter   opacity   z-index   lte   class   隐藏   idt   样式   

原文地址:https://www.cnblogs.com/zzz-knight/p/12965633.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!