画像の色をブラウザで変える？CSSでできる魔法のようなテクニック

2024-04-02

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

filterプロパティは、画像にさまざまな効果を適用するために使用できます。色の変更には、以下のプロパティが使用できます。

brightness: 画像の明るさを調整します。
contrast: 画像のコントラストを調整します。
saturate: 画像の彩度を調整します。
hue-rotate: 画像の色相を回転させます。

これらのプロパティを組み合わせて、さまざまな色の変更を行うことができます。

例

<img src="image.png" alt="Image">

img {
  filter: brightness(0.5) contrast(1.5) saturate(1.5);
}

この例では、画像の明るさを半分に、コントラストを1.5倍、彩度を1.5倍に設定しています。

メリット

コードがシンプル
さまざまな色の変更が可能

古いブラウザでは対応していない場合がある
複雑な色の変更には不向き

mask-imageプロパティは、画像をマスクするために使用できます。マスク画像として、単色画像を使用することで、画像の色を変更することができます。

<img src="image.png" alt="Image">

img {
  mask-image: url("mask.png");
}

この例では、mask.pngという単色画像を使用して、image.pngの色を変更しています。

古いブラウザでも比較的対応している

コードが複雑になる
マスク画像を用意する必要がある

@mediaクエリを使用して、デバイスやブラウザによって画像の色を変えることができます。

<img src="image.png" alt="Image">

@media (prefers-reduced-color-scheme: no-preference) {
  img {
    filter: brightness(0.5) contrast(1.5) saturate(1.5);
  }
}

@media (prefers-reduced-color-scheme: dark) {
  img {
    filter: brightness(1.2) contrast(1.0) saturate(0.8);
  }
}

この例では、暗いテーマを使用している場合は、画像の明るさを上げ、コントラストを下げ、彩度を下げるように設定しています。

デバイスやブラウザに合わせて画像の色を変えることができる

PNG画像の色を変える方法はいくつかあります。それぞれの方法のメリットとデメリットを理解して、目的に合った方法を選択してください。

HTML

<img src="image.png" alt="Image">

CSS

/* 1. filterプロパティを使う */

img.filter {
  filter: brightness(0.5) contrast(1.5) saturate(1.5);
}

/* 2. mask-imageプロパティを使う */

img.mask {
  mask-image: url("mask.png");
}

/* 3. @mediaクエリを使う */

@media (prefers-reduced-color-scheme: no-preference) {
  img.media {
    filter: brightness(0.5) contrast(1.5) saturate(1.5);
  }
}

@media (prefers-reduced-color-scheme: dark) {
  img.media {
    filter: brightness(1.2) contrast(1.0) saturate(0.8);
  }
}