[ css ] backdrop-filter 增加元素背後濾鏡

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

/* 關鍵詞值 */
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%);

/* 全局值 */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: unset;

兼容性

DEMO