CSS彈出層背景變黑是一種常見(jiàn)的頁(yè)面效果，一般用于彈出層遮蓋背景，突出彈出層內(nèi)容。實(shí)現(xiàn)該效果的方法是利用CSS屬性將頁(yè)面背景顏色變暗。

.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 50%;
border: 1px solid #ccc;
background-color: #fff;
z-index: 9999; /* 顯示在其他元素上面 */
}
.popup-overlay {
position: fixed;
top:0;
left:0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5); /* 顏色透明度為50%的黑色 */
z-index: 999; /* 顯示在.popup下面，但比其他元素高 */
}

上方的代碼實(shí)現(xiàn)了一個(gè).popup彈出層和.popup-overlay背景遮罩層。彈出層的z-index屬性設(shè)置為9999，高于其他元素，背景遮罩層的z-index屬性設(shè)置為999，比其他元素低一些但更高于彈出層，確保點(diǎn)擊彈出層以外的其他區(qū)域也會(huì)關(guān)閉彈出層。

其中，背景遮罩層的背景顏色使用rgba顏色模式，其中的最后一個(gè)參數(shù)為顏色透明度，數(shù)值范圍為0到1。在這里，我們?cè)O(shè)置成了0.5，意味著遮罩層能夠半透明顯示頁(yè)面的背景色。如果要調(diào)整顏色透明度，只需要調(diào)整這個(gè)數(shù)值即可。

最后，使用JavaScript控制彈出層的顯示與隱藏，當(dāng)彈出層顯示時(shí)，同時(shí)添加.popup-overlay類(lèi)，使背景變黑；當(dāng)彈出層隱藏時(shí)，移除.popup-overlay類(lèi)，使背景還原。