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