CSS中的filter與backdrop-filter屬性的異同點

還記得毛玻璃效果嗎？不知道你是否用filter屬性設定過毛玻璃效果，其實實作這個效果的最佳方案應該使用backdrop-filter，因為filter導緻模糊四周露白，模糊不均勻，但是backdrop-filter的相容性較差與filter，随着現代浏覽器的發展，也相容也逐漸跟上了，是以這個css屬性我們還是可以嘗試一下的。

在 css 中，有兩個和濾鏡相關的屬性 — filter 和 backdrop-filter。

定義

backdrop-filter CSS 屬性可以讓你為一個元素後面區域添加圖形效果(如模糊或顔色偏移)。因為它适用于元素背後的所有元素，為了看到效果，必須使元素或其背景至少部分透明。

注意：backdrop-filter的前提是：元素或其背景至少部分透明，如果元素不設定半透明，此屬性不會生效！

差別

filter和backdrop-filter具有一定差別：

• Filter不僅僅作用于目前元素，後代元素也會繼承這個屬性，作用于一個空背景元素則沒有效果。
• backdrop-filter 是使透過該層的底部元素模糊化。
• backdrop-filter屬性可以讓你為一個元素後面區域添加圖形效果（如模糊或顔色偏移）。因為它适用于元素 背後 的所有元素，為了看到效果，必須使元素或其背景至少部分透明。
• backdrop-filter目前相容性不佳，尤其是安卓移動端。

注意兩者之間的差異，filter 是作用于元素本身，而 backdrop-filter 是作用于元素背後的區域所覆寫的所有元素。

它們所支援的濾鏡種類：

Filter	Backdrop-Filter	備注
url	√	√	擷取指向SVG過濾器的URI
blur	√	√	高斯模糊濾鏡
brightness	√	√	圖像明亮度的濾鏡
contrast	√	√	圖像的對比度濾鏡
drop-shadow	√	√	圖像的陰影濾鏡
grayscale	√	√	圖像灰階濾鏡
hue-rotate	√	√	圖像色相濾鏡
invert	√	√	反轉濾鏡
opacity	√	√	透明度濾鏡
sepia	√	√	深褐色濾鏡
saturate	√	√	圖像飽和度濾鏡

可以看到，兩者所支援的濾鏡種類是一模一樣的。

用法​

/* 關鍵詞值 */
backdrop-filter: none;


/* 指向 SVG 濾鏡的 URL */
backdrop-filter: url(commonfilters.svg#filter);


/* <filter-function> 濾鏡函數值 */
backdrop-filter: blur(2px); /*高斯模糊*/
backdrop-filter: brightness(60%); /* 亮度 */
backdrop-filter: contrast(40%);  /* 對比度 */
backdrop-filter: drop-shadow(4px 4px 10px blue); /* 陰影 */
backdrop-filter: grayscale(30%); /* 灰階 */
backdrop-filter: hue-rotate(120deg); /* 色相旋轉 */
backdrop-filter: invert(70%);  /* 反色 */
backdrop-filter: opacity(20%); /* 透明度 */
backdrop-filter: sepia(90%); /* 褐色 */
backdrop-filter: saturate(80%); /* 飽和度 */


/* 多重濾鏡 */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%)