【CSS3】画像を白黒写真にする（グレースケール、モノクロ、セピア調…）

Tweet

Category css 2015/06/16

問題

画像をCSSでモノクロ写真にできますか？

答え

IEでfilterのサポートがなくなってうまくいかない。 FirefoxはurlでSVGを指定したらCSSで対応できる。Webkit系は簡単な記述で対応できる。

.grayscale {
	-webkit-filter: grayscale(100%);
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
	filter: grayscale(100%);
}

<img src="http://画像/の/URL" class="grayscale" alt="CSSでグレースケール画像">

→ CSS適用 →

CSSで :hover も活用すると、マウスオーバーで白黒、元のカラー画像を切り替えることもできる。

.grayscale {
	-webkit-filter: grayscale(100%);
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
	filter: grayscale(100%);
}
.grayscale:hover {
	-webkit-filter: grayscale(0%);
	filter: none;
}

filter には grayscale 以外に、sepia や、彩度、コントラスト、明るさなど指定できる項目がいくつかある。

filter: url(resources.svg);
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* 複数同時指定の場合は、横に並べる */
filter: contrast(175%) brightness(3%);

/* 解除 */
filter: none;

色を指定したいときは、おそらくひとひねり必要。

（マウスオーバーでCSS適用）

メモ

CSSだけでさらっといけるといいのですが、IE10、IE11などにも対応にしたい場合は以下のようなJavaScriptを使うことになるでしょう。

http://gianlucaguarini.github.io/jQuery.BlackAndWhite/