CSSで画像を加工する filter プロパティの使い方&レナ画像での加工例 #CSS3

filter プロパティとは

CSSで、画像を加工するプロパティです。

主要ブラウザのうちIEは非サポート、Edgeは url のみ非サポートです。

プロパティ名	変わる要素	設定する値	初期値
blur	ぼかし	0 ~ 10px	0px
drop-shadow	影	box-shadowと同じ	box-shadowと同じ
contrast	コントラスト	0 ~ 100%	100%
grayscale	グレイスケール（モノクロ化）	0 ~ 100%	0%
sepia	セピア	0 ~ 100%	0%
opacity	透明度	0 ~ 100%	100%
saturate	彩度	0 ~ 100%	100%
brightness	輝度（明るさ）	0 ~ 100%	100%
hue-rotate	色相回転	0 ~ 360deg	0deg
invert	色調反転	0 ~ 100%	0%

style.css

img {
  filter: contrast(175%); 
}

/* 複数指定 */
img {
  filter
}

/* 全要素への指定 */ 
img {
  filter: inherit;
  filter: initial;
  filter: unset;
}

レナ画像の加工例をgistで作りました。

githackで確認できます。