備忘録的プログラミングリファレンス

backdrop-filter プロパティ

 backdrop-filter プロパティは、エレメントの後ろの表示に「ぼかしや色相、コントラス卜」といった効果がある CSS のプロパティです。
 このプロパティでは、エレメントの内容には影響がありません。後ろの内容に「ぼかしや色相、コントラス卜」といった効果を与えます。

backdrop-filter プロパティ
backdrop-filter の例です

 「ぼかし」の効果がある blur() メソッドを利用する場合は、不透明度を指定した背景色を設定する必要があります。混じる色を合わせて設定する必要があります。

backdrop-filter プロパティ
.content {
	background-color:rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(3px);
}
詳しくは「Example」を参照してください

 backdrop-filter プロパティに似たプロパティに、filter プロパティがあります。
 filter プロパティは内容の全体がプロパティの指定の影響を受けます。背景のみを変化させたい場合は backdrop-filter プロパティを使うべきでしょう。
 ただし、ブラウザのバージョンによっては使えないかもしれません。

ページ内 Index

構文(Syntax)

CSS

backdrop-filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() ;

各メソッド は CSS のフィルターに関する <filter-value-list> の値を返します。以下の値(Values)を参照してください。

複数の値が指定可能です。

DOM ( JavaScript )

値の取得
String = object.style.backdropFilter;
値の設定
object.style.backdropFilter = " none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() ";

値(Values)

Value摘要
noneデフォルト値。設定値なし
以下は <filter-value-list> の値を返す
url( )SVG フィルターの URL
none初期値(default値)。
blur(px)ぼかし半径。値が大きいほどにぼやかしが大きくなる。
brightness(%)明るさ調整。100%がdefault。
contrast(%)コントラスト調整。100%がdefault。
drop-shadow(h-shadow v-shadow blur spread color)エレメントに影を加えることができる。box-shadowプロパティと同じ値設定。
grayscale(%)グレイスケールに加工。0%がdefault。100%で完全な白黒表現。
hue-rotate(deg)色相を調整(反対色)。0degでdeafult。360degで反対色。
invert(%)ネガポジ反転。0%がdefault。100%で完全な反転色。
opacity(%)透過度を調整。100%がdefault。0%で見えなくなる。opacityプロパティと同じ値設定。
saturate(%)色の濃さをあらわす彩度。100%がdefault。0%で見えなくなる。
sepia(%)セピア加工。0%がdefault。100%で完全なセピア色。
url(URL)SVGフィルターが設定されたXMLファイルを取得。
 
initial初期値に戻す。
inherit親エレメントのプロパティを継承。

 backdrop-filter プロパティは、複数の値を組み合わせることができます。

備考(Remarks)

初期値(Default value)none
継承(Inherited)No
CSS AnimationYes

Example

 以下は backdrop-filter プロパティの例です。
 親エレメントにテキストと背景画像の設定があります。子エレメントの位置を調整して親エレメントのテキストと背景がどのようになるかを試しています。
  backdrop-filter プロパティが設定されたエレメントの後ろにある内容に「ぼかし」などの効果があることが分かります。