CSS彈出遮罩半透明是一種常見的網(wǎng)頁效果。當(dāng)用戶在網(wǎng)頁上進(jìn)行某些操作時，彈出的遮罩會覆蓋整個網(wǎng)頁并且只透出少量的頁面，這時用戶只能專注于遮罩上的內(nèi)容而無法進(jìn)行其他操作。在這篇文章中，我們將介紹如何使用CSS創(chuàng)建一個簡單的半透明彈出遮罩。
/* CSS代碼 */
.mask {
position: fixed; /* 讓遮罩始終停留在網(wǎng)頁頂部 */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5); /* 背景顏色設(shè)置為半透明黑色 */
z-index: 9999; /* z-index設(shè)置為9999，確保遮罩浮在頁面最上面 */
display: none; /* 默認(rèn)情況下，遮罩隱藏 */
}
.mask.show {
display: block; /* 當(dāng)給遮罩添加class名稱“show”后，遮罩會顯示出來 */
}以上是我們初始的CSS代碼。接下來，需要在HTML代碼中實現(xiàn)點(diǎn)擊按鈕顯示遮罩的效果。
通過以上代碼，我們實現(xiàn)了點(diǎn)擊按鈕能夠彈出遮罩并呈現(xiàn)半透明效果。希望這篇文章對你有所幫助！
上一篇css彈性布局是什么意思
下一篇css彈性盒不留空隙