CSSリファレンス

filterの意味と使い方

「filter」プロパティを使うと、要素に対して様々なフィルタをかけることができます。フィルタの種類はフィルタ関数またはSVGで定義しておいた設定を利用して指定します。フィルタ関数を利用する場合は「opacity(50%)」のようにフィルタを適用する度合いを引数に指定します。
各フィルタ効果を半角スペースで区切って記述すれば、複数の効果を適用できます。

値の指定方法

grayscale()

要素をグレースケールにします。グレースケールにする度合いを「0%〜100%」の値で指定します。初期値は「0%」です。「100%」を指定すると完全にグレーになります。

sepia()

要素をセピア調にします。セピア調にする度合いを「0〜100%」の値で指定します。初期値は「0%」で「100%」を指定すると完全にセピア調になります。

saturate()

要素の彩度を変更します。現在の彩度を「100%」とし(初期値)、彩度を変更する度合いを「0%」以上の値で指定します。0%を指定すると無彩色になり、値が大きくなればなるほど彩度が高くなります。

hue-rotate()

要素の色相を変更します。色相環を回転される角度を「0deg〜360deg」の値で指定します。初期値は「0deg」です。

invert()

階調を反転します。反転させる度合いを「0%〜100%」の値で指定します。初期値は「0%」です。「100%」を指定すると、完全に反転します。

opacity()

透明度を変更します。透明の度合いを「0%〜100%」の値で指定します。初期値は「100%」です。「0%」を指定すると、完全に透明になります。

brightness()

明度を変更します。現在の明度を「100%」とし(初期値)、明度を変更する度合いを「0%」以上の値で指定します。「0%」を指定すると観山に黒になり、値が大きくなるほど明るくなります。

contrast()

コントラストを変更します。現在のコントラストを「100%」とし、コントラストを変更する度合いを「0%」以上の値で指定します。「0%」を指定すると完全にグレーになります。

dropshadow()

ドロップシャドウを付けます。影の長さを色を半角スペースで区切って指定します。指定方法はbox-shadowプロパティと同じですが、影を広げる距離を指定する4つ目の値はdrop-shadow()関数にはありません。

url()

SVGで定義した設定のIDを、「#ID」または「URL#ID」の書式で指定します。