■CSSフィルターで簡単画像変換（12）：引数の単位

　CSS（Cascading Style Sheets）のフィルター機能を使用すると、カラー画像に対して容易に下記に示す各種変換を施すことができます。

（１）blur（ぼかし）
（２）brightness（明度）
（３）contrast（コントラスト）
（４）drop-shadow（ドロップシャドウ）
（５）grayscale（グレースケール）
（６）hue-rotate（色相環）
（７）invert（階調の反転）
（８）opacity（不透明度）
（９）saturate（彩度）
（10）sepia（セピア）

　これらのフィルター機能を使用する場合は、引数に適当な値を単位付きで指定します。
　これらの単位はフィルター機能に限らず、CSS全般に適用されます。

[ 引数の単位の例 ]：　px, em, rem, %, vh, vw...

　ここでは、grayscale（グレースケール）の例を示します。

　・元画像
　

　・使用フィルター：　{filter: grayscale(0.6)}　　（注）0.6 = 60%
　

　・使用フィルター：　{filter: grayscale(90%)}
　


ホーム