背景色で画像をグレーアウト！CSSのbackground-colorプロパティ

CSSで画像をグレーアウトする

filter プロパティを使用する

方法

filter プロパティを使用して grayscale() 関数を指定することで、画像をグレースケールに変換できます。

img {
  filter: grayscale(100%); /* 画像を完全にグレーアウト */
}

img:hover {
  filter: grayscale(0%); /* ホバー時に元の色に戻す */
}

利点

• すべてのブラウザでサポートされている
• コードがシンプル

欠点

• 完全なグレースケール変換しかできない
• その他のフィルターと組み合わせて使用できない

opacity プロパティを使用する

opacity プロパティを使用して画像の透明度を下げることで、グレーアウト効果を疑似的に表現できます。

img {
  opacity: 0.5; /* 画像を半透明にする */
}

img:hover {
  opacity: 1; /* ホバー時に元の色に戻す */
}

• 画像の色合いが変化する

background-color プロパティを使用する

img {
  background-color: #ccc; /* 画像の背景をグレーにする */
}

img:hover {
  background-color: transparent; /* ホバー時に元の色に戻す */
}

• 画像の背景色が常に表示される

SVGフィルターを使用する

SVGフィルターを使用して、より複雑なグレーアウト効果を作成できます。

<svg viewBox="0 0 100 100">
  <filter id="grayscale">
    <feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" />
  </filter>

  <image href="image.jpg" filter="url(#grayscale)" />
</svg>

• 複雑なグレーアウト効果を作成できる
• 高度なカスタマイズが可能

• コードが複雑

<img src="image.jpg" alt="画像">

img {
  filter: grayscale(100%); /* 画像を完全にグレーアウト */
}

img:hover {
  filter: grayscale(0%); /* ホバー時に元の色に戻す */
}

opacity プロパティを使用する

<img src="image.jpg" alt="画像">

img {
  opacity: 0.5; /* 画像を半透明にする */
}

img:hover {
  opacity: 1; /* ホバー時に元の色に戻す */
}

background-color プロパティを使用する

<img src="image.jpg" alt="画像">

img {
  background-color: #ccc; /* 画像の背景をグレーにする */
}

img:hover {
  background-color: transparent; /* ホバー時に元の色に戻す */
}

SVGフィルターを使用する

<svg viewBox="0 0 100 100">
  <filter id="grayscale">
    <feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" />
  </filter>

  <image href="image.jpg" filter="url(#grayscale)" />
</svg>

@media クエリを使用して、特定のメディアクエリに一致する場合のみ画像をグレーアウトできます。

@media (prefers-color-scheme: dark) {
  img {
    filter: grayscale(100%); /* ダークモードでは画像をグレーアウト */
  }
}

JavaScriptを使用して、画像をグレーアウトするダイナミックな方法を作成できます。

<img src="image.jpg" alt="画像" id="my-image">

const image = document.getElementById('my-image');

image.addEventListener('mouseover', () => {
  image.style.filter = 'grayscale(100%)';
});

image.addEventListener('mouseout', () => {
  image.style.filter = 'grayscale(0%)';
});

CSSライブラリを使用する

grayscale.js などのCSSライブラリを使用して、画像をグレーアウトする簡単な方法があります。

<script src="https://cdnjs.cloudflare.com/ajax/libs/grayscale.js/3.0.0/grayscale.min.js"></script>

<img src="image.jpg" alt="画像" id="my-image">

const image = document.getElementById('my-image');

grayscale(image);

これらの方法は、上記4つの方法よりも複雑ですが、より柔軟性と制御性を提供します。