css彈出遮蓋層,是我們前端程序員經(jīng)常經(jīng)常使用的一個(gè)功能,雖然有很多UI框架都帶有些功能,但有時(shí)僅僅是一個(gè)簡(jiǎn)單的彈出層,卻有引入很多CSS,就顯得有些笨重了,這時(shí)我們可以非常容易的寫(xiě)一個(gè)
<style>
.mask{
position: absolute;
left:0;
right:0;
top:0;
bottom: 0;
background-color: rgba(0,0,0,.5);
}
.test{
position: absolute;
width: 300px;
height: 300px;
background-color: green;
left:50%;
top:50%;
transform: translate(-150px,-150px);
text-align: center;
line-height: 300px;
color: #fff;
}
</style>
<a href="">南昌雅騰</a>
<div class="mask">
<div class="test">小豬佩奇,啦啦啦</div>
</div>效果如下:

