css弹出遮盖层,是我们前端程序员经常经常使用的一个功能,虽然有很多UI框架都带有些功能,但有时仅仅是一个简单的弹出层,却有引入很多CSS,就显得有些笨重了,这时我们可以非常容易的写一个
<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>
效果如下: