CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS3で画像をグレースケールに変換する方法

CSS3では、filterプロパティにgrayscale()関数を指定するだけで、画像を簡単にグレースケール（モノクロ）へ変換できます。

grayscale()関数の基本

grayscale()関数には、変換の度合いをパーセンテージ（または0〜1の数値）で指定します。

  • 0%：元のカラー画像のまま表示
  • 100%：完全なグレースケールに変換
  • 100%超の値：指定可能ですが、効果は100%と同じになります

また、brightness()（明るさ）やcontrast()（コントラスト）といった他のフィルタ関数と組み合わせて使うこともできます。複数のフィルタを同時に適用する場合は、1つのfilterプロパティ内にスペース区切りで並べて記述します。別々の宣言として書いてしまうと、後から書いたものだけが適用される点に注意しましょう。

コード例

実際に、明るさ・コントラスト・グレースケールを組み合わせた例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
    filter: brightness(120%) contrast(120%) grayscale(130%);
}
</style>
</head>
<body>
<h1>Spring Framework</h1>
<img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring" width="160" height="150">
<h1>Learn MySQL</h1>
<p>下の画像は、上の元画像より明るく、コントラストが強調され、さらにグレースケール化されています。</p>
<img class="demo" src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring" width="160" height="150">
</body>
</html>

実行結果

このコードを実行すると、通常のカラー画像と、demoクラスが適用されたグレースケール画像が並んで表示されます。demoクラスの画像は、元画像に比べて明るさが120%、コントラストが120%に調整され、色味が完全に失われたモノクロ仕様になっていることが確認できます。

この手法は、ホバー時のエフェクトや、サイト全体の統一感を出すデザイン演出などにも応用できるため、覚えておくと便利です。

  1. OpenCVで画像に楕円を描画する方法｜cv2.ellipse()の使い方を解説

    この記事では、Pythonの画像処理ライブラリ「OpenCV」を使って、画像の上に楕円を描画する方法を解説します。楕円の描画には、OpenCVが提供する cv2.ellipse() 関数を使用します。元画像アルゴリズム（処理の手順）楕円を描画するまでの流れは、以下の手順になります。ステップ1: cv2 をインポートする。 ステップ2: imread() で画像を読み込む。 ステップ3: 楕円の中心座標を設定する。 ステップ4: 楕円の長軸・短軸の長さ（axesLength）を設定する。 ステップ5: 楕円の回転角度（angle）を設定する。 ステップ6: 描画を開始する角度と終了する角度を設定

  2. OpenCVで画像をカラーからグレースケールに変換する方法

    この記事では、OpenCVを使って画像のカラー表現をRGB（BGR）からグレースケールへ変換する方法を解説します。グレースケール変換は、エッジ検出や物体認識などの画像処理を行う前段階としてよく使われる、最も基本的なテクニックの一つです。アルゴリズムステップ1：OpenCVをインポートする。 ステップ2：imread()関数で元画像を読み込む。 ステップ3：cv2.cvtColor()関数を使ってグレースケールに変換する。サンプルコードimport cv2 image = cv2.imread(colourful.jpg) cv2.imshow(Original, image) grayscal