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