CSS backdrop-filter 屬性
示例
為元素後面的區域新增圖形效果
div.transbox {
background-color: rgba(255, 255, 255, 0.4);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
自己動手試一試 »
定義和用法
backdrop-filter 屬性用於為元素的背景應用圖形效果。
提示： 要看到效果，元素或其背景必須至少部分透明。
| 預設值 | none |
|---|---|
| 繼承 | no |
| 可動畫 | 否。 閱讀關於可動畫屬性 |
| 版本 | CSS3 |
| JavaScript 語法 | object.style.backdropFilter="grayscale(100%)" |
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
帶 -webkit- 的數字表示第一個支援帶字首的版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| backdrop-filter | 76 | 79 | 103 | 9 -webkit- | 63 |
CSS 語法
backdrop-filter: none|filter|initial|inherit;
屬性值
| 值 | 描述 | 演示 |
|---|---|---|
| none | 預設值。不對背景應用任何濾鏡 | 演示 ❯ |
| 篩選器 | 一系列用空格分隔的濾鏡函式，例如：
或者一個指向將應用於背景的 SVG 濾鏡的 URL |
演示 ❯ |
| initial | 將此屬性設定為其預設值。閱讀關於initial | |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
相關頁面
CSS 參考： filter 屬性
CSS 教程： CSS Images
HTML DOM 參考： filter 屬性
