hue-rotate関数

関数hue-rotateは、 色相環上の色相を回転させることで 背景画像の色調を変更することができます。 プロパティの値は、色相環の角度を示す度単位で指定されます。 値0または360は、 画像が元のままであることを示し、この範囲内の任意の数値は 背景の色調を変化させます。 デフォルト値は0degです。

構文

cssセレクタ {
  filter: hue-rotate(角度);
}

例

画像の色相を150degに設定してみましょう:

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

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

Результат:

例

今度は画像の色相を50degに設定してみます:

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

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

Результат:

例

hue-rotateプロパティに値を設定しない場合を見てみましょう:

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

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

Результат:

関連項目