どのように作成するか：画像効果を追加

画像に視覚効果を追加する方法を学びます。

画像フィルタ

CSS filter 属性は要素に視覚効果（例えばぼやけと鮮やかさ）を追加します。

注意：Internet Explorer、Edge 12 または Safari 5.1 及びそれ以前のバージョンではサポートされていません filter 属性。

すべての画像の色を黒白に変更（100%グレー）：

オリジナル画像

グレースケール（100%）

img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

すべての画像にぼやけ効果を適用：

オリジナル画像

ぼやけ処理（5ピクセル）

img {
  -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
  filter: blur(5px);
}