CSSを使用した画像の白黒フィルタリング方法

1. グレースケールフィルタ:

   img {
   filter: grayscale(100%);
   }

   このコードは、grayscaleフィルタを使用して画像を完全な白黒に変換します。パーセンテージの値を変更することで、白黒の割合を調整することも可能です。

2. セピアトーンフィルタ:

   img {
   filter: sepia(100%);
   }

   このコードは、sepiaフィルタを使用して画像にセピアトーン効果を与えます。同様に、パーセンテージの値を調整することで効果の強さを変えることができます。

3. ブライトネスフィルタ:

   img {
   filter: brightness(0%);
   }

   このコードは、brightnessフィルタを使用して画像の明るさを調整します。パーセンテージの値を変更することで、画像を暗くしたり明るくしたりすることができます。

4. コントラストフィルタ:

   img {
   filter: contrast(200%);
   }

   このコードは、contrastフィルタを使用して画像のコントラストを調整します。パーセンテージの値を変更することで、コントラストの強さを調整することができます。

これらはいくつかの一般的な方法ですが、CSSには他にも多くのフィルタプロパティがあります。ぜひこれらのコード例を試して、画像に適したフィルタリング効果を見つけてみてください。

また、画像自体に直接フィルタを適用するだけでなく、CSSの::beforeや::after擬似要素を使用して要素全体にフィルタをかけることもできます。

以上が画像に白黒フィルタを適用するいくつかの方法とコード例です。ご参考になれば幸いです。