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

CSSでオブジェクトの色をスペクトル上の反対色（ネガティブ画像）に反転させる方法

Invert（反転）効果は、オブジェクトの色をカラースペクトル上の反対の値へマッピングするためのフィルタです。これにより、写真のネガのように階調を反転させた「ネガティブ画像」を作成できます。

Invertフィルタのパラメータ

このフィルタでは、以下のパラメータが使用されます。

番号パラメータと説明

1		 Invert
オブジェクトの色を、カラースペクトル上の反対の値にマッピングします。

使用例

以下のコードを実行すると、画像やテキストの色をスペクトル上の反対の値にマッピング（反転）できます。

<html>
   <head>
   </head>
   <body>
      <img src = "/images/css.gif"
          alt = "CSS Logo"
          style = "Filter: invert">

      <p>テキストの例：</p>
      <div style = "width: 357;
          height: 50;
          font-size: 30pt;
          font-family: Arial Black;
          color: red;
          Filter: invert">CSS Tutorials</div>
   </body>
</html>

モダンブラウザでの書き方

なお、上記の Filter: invert は旧Internet Explorer独自の構文であり、現在では非推奨となっています。Chrome・Firefox・Edge・Safariなどの最新ブラウザでは、CSS標準の filter プロパティを使用してください。例えば、以下のように記述します。

img {
  filter: invert(100%);
}

invert() の引数には0%～100%の値を指定でき、100%で完全に色が反転し、50%ではグレーになります。この値を調整することで、反転の度合いを柔軟にコントロールできます。

  1. CSSのrgb()関数で色を定義する方法｜RGBモデルの基本と実例

    CSSでは、rgb()関数を使うことで、赤・緑・青（Red-Green-Blue）の3つの光の三原色を組み合わせた「RGBモデル」で色を指定できます。各色の値は0〜255の範囲で設定し、rgb(赤, 緑, 青)の形式で記述します。 rgb()関数の基本的な書き方 構文は以下のとおりです。 rgb(赤の値, 緑の値, 青の値) rgb(255, 0, 0) → 赤 rgb(0, 255, 0) → 緑 rgb(0, 0, 255) → 青 rgb(255, 255, 255) → 白 rgb(0, 0, 0) → 黒 3つの値がすべて同じ場合は無彩色（グレー）になり、値が大きいほど明るい色に

  2. CSSでプレースホルダーの色を変更する方法｜::placeholder疑似要素の使い方

    CSSで入力フォームのプレースホルダー（placeholder）の文字色を変更するには、::placeholder 疑似要素を使用します。ただし、ブラウザによって対応状況が異なるため、Internet Explorer や旧 Microsoft Edge 向けのベンダープレフィックスも併せて指定しておくと、より多くの環境で意図した色が反映されます。それぞれのセレクタの役割は以下の通りです。::placeholder … 標準的な疑似要素（Chrome・Firefox・Safari などの主要ブラウザに対応）:-ms-input-placeholder … Internet Explorer 1