CSS 的背景濾鏡- backdrop-filter

分享:
標籤: CSS CSS3

之前有提到 CSS 也可以做濾鏡的效果,不過這種濾鏡會影響到整個區塊,也就是說如果我們想要讓背景模糊,就必須把內容跟背景區塊分開,不然會連內容一起模糊,那如果不想這麼麻煩的話,CSS 有一個屬性叫 backdrop-filter,就可以單純設定背景的濾鏡了。

使用方法跟 filter 一樣,所以再來看一下可以設定的這些值:

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

/*  濾鏡函數值 */
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%);

 

 

雖然 MDN 說大多主流瀏覽器都支援了,但我用起來只有 chrome 有支援的樣子,不過我相信應該之後也都會支援吧,有興趣就用看看。