invert関数

invert関数は、 背景画像の色を反転させることができます。 0の値は、 画像が元のままであることを意味します。 100%または1の値は背景色を完全に反転させます。 この範囲内の任意の数値は色を部分的に反転させます。 負の値は指定できません。 デフォルト値は0です。

構文

cssセレクタ {
  filter: invert(数値);
}

例

画像の色を50%の値まで反転させてみましょう：

html<div id="elem"></div>

css#elem {
  filter: invert(50%);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

例

次に、画像の色を100%の値まで反転させてみましょう：

html<div id="elem"></div>

css#elem {
  filter: invert(100%);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

例

次に、invert関数の値を 0に設定してみましょう：

html<div id="elem"></div>

css#elem {
  filter: invert(0);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

関連項目