hue-rotate関数

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

構文

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

例

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

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

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

例

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

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

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

例

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

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

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

hue-rotate関数

構文

例

例

例

関連項目