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

blur() メソッド

 blur() メソッドは、引数の値からガウス関数の標準偏差の値を返す CSS 関数です。
 blur() メソッドの値は、filterbackdrop-filter プロパティで、エレメントのぼかし表示のために利用されます。
 引数の範囲のピクセルを混合します。0 でぼかしなし、値が大きなるほどぼかしが強くなります。

blur() メソッド
.content {
	background-color:rgba(255, 255, 255, 0.4);
	filter: blur(3px);
}
詳しくは「Example」を参照してください

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

ページ内 Index

構文(Syntax)

CSS

blur( length );

引数

 引数は、CSS の長さです。

 blur() メソッドは、filterbackdrop-filter プロパティといった <filter-value-list> を使用するプロパティで利用します。

Example

 blur() メソッドの例です。backdrop-filter プロパティで blur() メソッドを使用しています。
 backdrop-filter プロパティは子エレメントで使用します。 backdrop-filter プロパティは、子エレメントの後ろにある内容に影響があることが分かります。
 ここでは、親エレメントにテキストと背景画像の設定があります。子エレメントの位置を調整して親エレメントのテキストと背景がどのように表示されるかを試しています。