画像をモノクロにする

CSS で画像をモノクロにする方法を整理します

実施環境

項目	詳細
PC	MacBook Pro（14 インチ、2021）Apple M1 Pro
OS	MacOS Monterey 12.5

filter: grayscale

普通の img 要素には、filter: grayscale(XX%)を当てることでモノクロにすることが出来ます。

.monochrome {
  filter: grayscale(100%);
}

この filter プロパティは他にも blur をかけたり、コントラストを変更したりすることができます。参考

background-image

background-imageでも問題なく動作しますが、上に乗った文字なども grayscale が適用されてしまいます。それを回避したい場合は、疑似要素を使う必要があります。

blend-mode

blend-mode を使うという手もあるようです。この場合先程の background-image における上に乗った文字問題も回避できます。（今回は background 用のbackground-blend-modeを使用しました。mix-blend-modeというのもあります。）真っ黒の要素と画像を重ねてブレンドしているということのようです。

.monochrome {
  background-image: linear-gradient(black, black),
    url(https://gahag.net/img/201509/08s/gahag-0002507193-1.jpg);
  background-size: cover;
  background-blend-mode: saturation;
}

モノクロにするだけであれば filter で十分なんですが、blend-mode は他にも様々な加工をするのに有効です。blend-mode については別途まとめたいと思います。

そもそもモノクロ画像を用意する

固定であればこの方がいいのかもしれません。そういった変換サービスも存在するので、そちらを利用すればすぐに変換出来ます。

まとめ

固定だったら普通にモノクロ画像用意する気がする。