CSSで画像の色を変更する方法

画像の色を変更するには、CSSのフィルターを使用します。以下に、いくつかのシンプルで簡単な方法とコード例を示します。

img {
  filter: grayscale(100%);
}

このコードでは、grayscale() 関数を使用して画像を完全なグレースケールに変換しています。パーセンテージの値を調整することで、グレースケールの強さを変更することができます。

img {
  filter: hue-rotate(90deg);
}

このコードでは、hue-rotate() 関数を使用して画像の色相を回転させています。度数の値を調整することで、色相の変化を制御することができます。

img {
  opacity: 0.5;
}

このコードでは、opacity プロパティを使用して画像の透明度を設定しています。値を0から1の範囲で指定することができます。

これらはいくつかの基本的な方法ですが、CSSフィルターには他にも多くのオプションがあります。必要に応じて、ぼかし効果や明るさの調整など、さまざまなフィルターを試してみてください。

以上の方法を使用すると、画像の色を簡単に変更することができます。ウェブデザインのカスタマイズやブログのビジュアルエフェクトを追加する際に役立ちます。