我們經(jīng)常用到頁(yè)面彈出一個(gè)圖層，并讓下面的顯示被遮蓋，這個(gè)是怎么實(shí)現(xiàn)的呢？
<body> <!-- 設(shè)置一個(gè)遮蓋層 --> <div class = "cover"></div> 我有被遮蓋了嗎？ <a href="http://www.ffgdkva.cn">南昌雅騰</a> <div class="test"> 我愛(ài)大家 </div> </body>
css樣式：
/* 遮蓋層 樣式*/
.cover{
width:100%;
height: 100%;
background: rgba(0, 0, 0, .9);
position: absolute;
left: 0;
top: 0;
z-index: 20;
pointer-events: auto;
/* 遮擋區(qū)域不讓穿透 */
/* 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;
}效果如下：
