MonoImage

CSSで画像をモノクロにする方法

Written by

admin

in

CSSを使って画像をモノクロにする方法をご紹介します。CSSのfilterプロパティを使うことで、簡単に画像をモノクロ（グレースケール）に変換できます。

基本的な方法

img {
  filter: grayscale(100%);
}

この例では、すべてのimg要素に100%のグレースケールフィルターを適用します。パーセンテージの値を変更することで、モノクロの強さを調整できます。例えば、grayscale(50%)とすると、半分だけグレースケール効果がかかります。

特定の画像だけに適用する

.monochrome {
  filter: grayscale(100%);
}

HTMLでは以下のように使います：

htmlコピー<img src="カラー画像.jpg" class="monochrome">

ホバー効果の追加

マウスオーバー時にカラーに戻る効果も人気があります：

.monochrome {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.monochrome:hover {
  filter: grayscale(0%);
}

ブラウザ互換性

最新のブラウザはすべてfilterプロパティをサポートしていますが、古いブラウザのために接頭辞を使用することもできます：

.monochrome {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

これらの方法を使って、CSSだけで簡単に画像をモノクロにすることができます。特定の要素や状況に応じて調整してください。

More posts