CSS backdrop-filter 屬性

定義和用法

backdrop-filter 屬性用于對元素背后的區域應用圖形效果。

提示：要看到效果，元素或其背景必須至少部分透明。

為元素背后的區域添加圖形效果：

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

backdrop-filter: none|filter|initial|inherit;

值	描述
none	默認值。不對背景應用任何濾鏡。
filter	由空格分隔的濾鏡函數列表，如： blur() brightness() contrast() drop-shadow() grayscale() hue-rotate() invert() opacity() sepia() saturate() 或指向 SVG 濾鏡的 URL。
initial	將此屬性設置為其默認值。參閱 initial。
inherit	從其父元素繼承此屬性。參閱 inherit。

默認值：	none
繼承性：	否
動畫制作：	支持。請參閱：動畫相關屬性。
版本：	CSS3
JavaScript 語法：	object.style.backdropFilter="grayscale(100%)"

表格中的數字表示首個完全支持該屬性的瀏覽器版本。

帶有 -webkit- 前綴的數字表示首個支持該前綴的版本。

Chrome	Edge	Firefox	Safari	Opera
76	79	103	9 -webkit-	63