（１）blur（ぼかし）
（２）brightness（明度）
（３）contrast（コントラスト）
（４）drop-shadow（ドロップシャドウ）
（５）grayscale（グレースケール）
（６）hue-rotate（色相環）
（７）invert（階調の反転）
（８）opacity（不透明度）
（９）saturate（彩度）
（10）sepia（セピア）
ここでは、（７）のinvert（階調の反転）の例を示します。
・使用フィルター： {filter: invert(30%)}、 {filter: invert(100%)}
引数の説明： 諧調の反転度合い、0を基準に1が最も反転した状態
（元画像）
●階調反転について（補足説明）
ネガポジ反転などとも呼ばれ、画像の各画素のRGB値（r, g, b）に対して、下記変換式で変換した画像を得る。
・100%反転
r' = 255 - r
g' = 255 - g
b' = 255 - b
・任意の%(a = 0〜100%)反転
r' = r(1 - a) + (255 - r)a
g' = g(1 - a) + (255 - g)a
b' = b(1 - a) + (255 - b)a
50%反転では、下記のように全面グレーになる。
r' = r(1 - 0.5) + (255 - r)x0.5 = 128
g' = g(1 - 0.5) + (255 - g)x0.5 = 128
b' = b(1 - 0.5) + (255 - b)x0.5 = 128
（図は左から順に、40%、50%、60%反転）
ホーム