很多時候，我們需要通過一層半透明的遮罩層來把后面的一切整體調暗，以便凸顯某個特定的UI元素，引導用戶關注，比如彈出層或者交互指南。

這個效果的傳統方法就是增加一個額外的HTML元素用于遮擋背景添加如下樣式：

.overlay {

position: fixed;

top: 0;

right: 0;

bottom: 0;

left: 0;

background-color: rgba(0,0,0,.8);

}

.lightbox { /*需要引起用戶注意的元素*/

position: absolute;

z-index: 1;

}

.overlay 遮罩層負責把這個元素背后所有的東西調暗。.lightbox需要指定一個更高的z-index，一邊繪制在遮罩層的上層。這個方法的優點：穩定可靠，缺點：需要增加額外的HTML。那怎么由CSS單獨實現呢？

box-shadow方案

我們可以用偽元素消除額外的HTML元素，比如：

body.dimmed::before {

position: fixed;

top: 0;

right: 0;

bottom: 0;

left: 0;

z-index: 1;

background: rgba(0,0,0,.8);

}

缺點： 移植性不好，

元素上可能有其他需求已經占用了 ::before元素，而且使用這個效果需要JS 給添加dimmed這個類，如果把遮罩層交給元素自己的::bofore偽元素來實現，就可以彌補不足。給偽元素設置z-index:-1;就可以讓它出現在元素的背后。盡管這解決了可移植的問題，但無法對遮罩層Z軸層次進行細粒度的控制，它可能出現在這個元素之后(期望的)，但也可能出現在這個元素的父元素活著祖先元素之后。這個方法還有一個問題，偽元素無法綁定獨立的JS事件處理函數。

box-shadow方案

具體做法就是生成一個巨大的投影，不偏移不模糊，簡單拙劣的模擬遮罩層效果：

box-shadow: 0 0 0 999px rgba(0,0,0,.8);

為了確保遮罩層總是可以覆蓋視口，我們換用視口單位來解決它。因為我們無法分開制定的水平和垂直方向的直徑，所以這里最合適的視口單位為vmax。1vmax相當于1vw和1vh兩者中較大值，因此滿足我們需求的最小值就是50vmax。由于投影是同時向四個方向擴展的，這個遮罩層的最終尺寸將是100vmax加上元素本身的尺寸。

position: fixed;

top: 50%; left: 50%;

margin: -200px;

box-shadow: 0 0 0 50vmax rgba(0,0,0,.8);

缺點： 如果頁面很長而為此擴大投影的擴張半徑就不太明智。

優點：可以有限度的使用該技巧，比如配合固定定位來使用，或者當頁面沒有滾動條時再用。

backdrop 方案

如果你想引導用戶關住的元素就是一個模擬的元素，(元素可以由它的showModal()方法顯示出來)，那么根據瀏覽器的默認樣式，它會自帶一個遮罩層。借助::backdrop偽元素，這個原生的遮罩層可以設置樣式的，比如可以把它變的更暗一些：

Click me

O HAI!

Close

dialog::backdrop { background: rgba(0,0,0,.8)}

缺點：瀏覽器對其支持比較有限，再次使用之前，確認一下兼容性的問題。

優點：盡管瀏覽器還不支持，對話框沒有遮罩層也不會導致任何功能的缺失，因為它只是用戶體驗的增強手段而已。

總結

以上是生活随笔為你收集整理的css模糊遮罩效果_CSS 半透明遮罩层的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。