filter プロパティ

　filter プロパティは、エレメントに対して視覚効果（ぼかし、彩度、影付きなど）を指定するプロパティです。

filter プロパティの値はスペースで区切って複数設定することができます。

明るさを150%、コントラストを110%、gray色の影を表示

filter: brightness(150%) contrast(110%) drop-shadow(10px 10px 5px gray);

詳しくは Example を参照してください

　似たプロパティに contain プロパティがあります。こちらはエレメントの内容に影響しないで視覚効果を与えます。

テキストを背景色の反対色で表示

　filter プロパティを使ってテキストの色を背景色の反対色に指定することもできます。
　反対色の調整は、invert()、 grayscale()、 contrast() 関数を利用します。

テキストを背景色の反対色に

p{
	filter: invert(100%) grayscale(100%) contrast(100%);
}

　invert()は反転色の調整。grayscale()はグレイスケールの調整。 contrast()はコントラストの調整です。

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

参考：CSSのfilterを使って、背景色に合わせた文字色を自動的に設定する

構文(Syntax)

CSS

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

DOM ( JavaScript )

値の取得

String = object.style.filter

値の設定

object.style.filter = " none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() ";

値（Values）

Value	摘要
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	親エレメントのプロパティを継承。

備考（Remarks）


初期値（Default value）	none
継承（Inherited）	no
変化（Animatable）	yes

Example

　filter プロパティの例です。

プロパティ名	概要
backdrop-filter	「ぼかし」などの効果をもたせることができる。うしろの内容だけが影響を受ける
filter	「ぼかし」などの効果をもたせることができる。内容全体が影響を受ける
position	エレメントの位置を調整