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>
效果如下: