CSS彈出div虛化是一種常見(jiàn)的網(wǎng)頁(yè)設(shè)計(jì)效果，可以在用戶(hù)與頁(yè)面交互時(shí)，增加頁(yè)面的動(dòng)感和層次感，使其更加醒目突出。

.popup{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index:9999;
opacity:0;
visibility:hidden;
transition:all 0.3s ease;
}
.popup.show{
opacity:1;
visibility:visible;
}
.popup:before{
content:"";
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
background: rgba(0,0,0,0.6);
z-index:999;
}

上述代碼中，我們使用了偽元素:before，對(duì)彈出div之外的部分添加了一層半透明的黑色背景，實(shí)現(xiàn)了虛化的效果。

在頁(yè)面中引入一個(gè)包含以上代碼的CSS文件，接著在HTML中添加如下代碼，即可實(shí)現(xiàn)簡(jiǎn)單的彈出div虛化效果：

這里是彈出的div內(nèi)容

當(dāng)需要彈出該div時(shí)，在相關(guān)的事件觸發(fā)函數(shù)中，添加使用JavaScript操作該彈出div的class屬性將其添加.show，即可彈出并虛化整個(gè)頁(yè)面。