CSS backdrop-filte 屬性


實例

讓元素後麵區域添加圖形效果:

.box { background-color: rgba(255, 255, 255, 0.3); border-radius: 5px; font-family: sans-serif; text-align: center; line-height: 1; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); max-width: 50%; max-height: 50%; padding: 20px 40px; }

嚐試一下 »

瀏覽器支持

表格中的數字表示支持該屬性的第一個瀏覽器版本號。

緊跟在 -webkit-, -ms- 或 -moz- 前的數字為支持該前綴屬性的第一個瀏覽器版本號。

屬性
backdrop-filter 76 17 103 9.0
-webkit-
63

標簽定義及使用說明

backdrop-filter CSS 屬性可以讓你為一個元素後麵區域添加圖形效果(如模糊或顏色偏移)。

因為它適用於元素背後的所有元素,為了看到效果,必須使元素或其背景至少部分透明。



語法

backdrop-filter: <filter-function-list>

描述
none 沒有應用於背景的濾鏡。
<filter-function-list> 一個以空格分隔的濾鏡函數(<filter-function>)或是要應用到背景上的 SVG 濾鏡。
/* 關鍵詞值 */
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: revert;
backdrop-filter: unset;