css设计遮盖层

时间：2023-06-16 10:02:06 类型：HTML/CSS
字号： 小  中  大

我们经常用到页面弹出一个图层，并让下面的显示被遮盖，这个是怎么实现的呢？

1
2
3
4
5
6
7
8
<body>
    <!-- 设置一个遮盖层 -->
<div class = "cover"></div>
    我有被遮盖了吗？ <a href="https://www.ncyteng.com">南昌雅腾</a>
    <div class="test">
        我爱大家
    </div>
</body>


css样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 /* 遮盖层 样式*/
    .cover{
        width:100%;
        height: 100%;
        background: rgba(0, 0, 0, .9);
        position: absolute;
        left: 0;
        top: 0;
        z-index: 20;
        pointer-events: auto;
        /* 遮挡区域不让穿透 */
        /* display: none; */
    }
    .test{
        width:200px;
        height: 200px;
        background: green;
        position: fixed;
        left: calc(50% - 100px);
        top: calc(50% - 100px);
        z-index: 200;
        display: block;
        color: #fff;
        padding: 10px;
        box-shadow: 0 0 5px 0 #ccc;
    }

效果如下：

2.png

<