CSSを使用して白い画像を黒くする方法

2024-02-15 20:23 CSS 画像処理 エフェクト
  1. filterプロパティを使用する方法:
<img src="white-image.jpg" style="filter: brightness(0) invert(1);">

この方法では、filterプロパティを使用して画像にエフェクトを適用します。brightness(0)は画像の明るさを0に設定し、invert(1)は画像の色を反転させます。これにより、白い画像が黒くなります。

  1. blend-modeプロパティを使用する方法:
<div style="background-color: black; width: 100%; height: 100%;">
  <img src="white-image.jpg" style="mix-blend-mode: difference;">
</div>

この方法では、画像を囲む要素に黒い背景色を設定し、mix-blend-modeプロパティを使用して画像と背景色のブレンドモードを設定します。differenceは画像の色を背景との差分として表示するブレンドモードです。これにより、白い画像が黒くなります。

  1. CSSフィルターを使用する方法:
<img src="white-image.jpg" style="filter: grayscale(100%); opacity(0%);">

この方法では、filterプロパティを使用して画像にグレースケールフィルターを適用し、opacityプロパティを使用して画像を透明にします。grayscale(100%)は画像を完全にグレースケール化し、opacity(0%)は画像を完全に透明にします。これにより、白い画像が黒くなります。

これらはいくつかの基本的な方法ですが、CSSにはさまざまな画像処理テクニックがあります。詳細については、CSSの画像処理やエフェクトに関するドキュメントやチュートリアルを参照してください。