filter プロパティ
filter プロパティは、エレメントに対して視覚効果(ぼかし、彩度、影付きなど)を指定するプロパティです。
filter プロパティの値はスペースで区切って複数設定することができます。
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() メソッドを利用する場合は、不透明度を指定した背景色を設定する必要があります。混じる色を合わせて設定する必要があります。
ページ内 Index
構文(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 プロパティの例です。
関連する CSS プロパティ
関連する CSS プロパティには以下のものがあります。
プロパティ名 | 概要 |
---|---|
backdrop-filter | 「ぼかし」などの効果をもたせることができる。うしろの内容だけが影響を受ける |
filter | 「ぼかし」などの効果をもたせることができる。内容全体が影響を受ける |
position | エレメントの位置を調整 |