CSSで写真の色を変える方法！

　CSSプロパティのcolorやbackground-colorの値を変更すると、文字色や背景色を変更できます。

　これらのスタイルはほとんどの要素の色を変更することができますが、画像の色の変更ができません。

background-image: url('IMAGE_PATH/imageName.png');

grayscaleとinvertを使って画像の色を変える

　grayscaleとinvertをうまく活用すると、画像の色を変更できます。

button:hover img{
-webkit-filter: grayscale(1) invert(1);
filter: grayscale(1) invert(1);
}

　上記は、ボタンにマウスを載せると実行されるCSSです。

grayscaleとは

　グレースケールは、画像をグレースケールに変換するCSS関数であり、0は元の画像（グレースケールの変更なし）、1は完全なグレースケール（より白黒に見えるようにする）です。ただし、黒の画像にグレースケールを指定しても、白く見えるわけではありません。暗い色は黒に近く、明るい色は白に近くなります。したがって、黒の画像に1のグレースケールを割り当てることはほとんどないですね。

Invertとは

　invertは、提供された画像のカラーサンプルを反転するCSS関数であり、0が元の画像で、1が反対です。グレースケールと組み合わせて使用すると、画像をできるだけ暗くしてから、最終的なスケールを反転してできるだけ明るくすることができます。

button:hover img{
-webkit-filter: invert(1);
filter: invert(1);
}

　元のアセットが黒なら、画像を暗くするためにグレースケールを使用する必要はありません。グレースケールがより意味のある状況は、コントラストのある画像、または少なくともすべてが白黒ではない画像の場合です。

　以下にサンプルコードを共有します。

　つまみをいじると、画像の明暗が変わるのが確認できますね！