Fungsi hue-rotate

Fungsi hue-rotate membolehkan anda mengubah kekerapan warna imej latar belakang dengan memutar rona pada bulatan warna. Nilai sifat dinyatakan dalam darjah, yang menandakan sudut bulatan warna. Nilai 0 atau 360 menandakan bahawa imej kekal tidak berubah, dan sebarang nombor yang terletak dalam julat ini akan menyebabkan perubahan rona latar belakang. Secara lalai, nilai ialah 0deg.

Sintaks

selector {
	filter: hue-rotate(sudut);
}

Contoh

Mari kita tetapkan kekerapan warna untuk imej kita kepada 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;
}

Contoh

Sekarang mari tetapkan kekerapan warna imej kepada 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;
}

Contoh

Mari kita tidak tetapkan nilai dalam sifat 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;
}

Lihat juga

fungsi blur,
yang mengaburkan latar belakang
fungsi brightness,
yang menetapkan kecerahan latar belakang
fungsi contrast,
yang menetapkan kontras latar belakang
fungsi drop-shadow,
yang menetapkan bayangan untuk latar belakang
fungsi invert,
yang menyongsangkan warna latar belakang
fungsi opacity,
yang menetapkan ketelusan latar belakang
fungsi sepia,
yang menukar latar belakang kepada sepia
sifat background,
yang merupakan sifat singkatan untuk latar belakang
sifat background-image,
yang boleh digunakan untuk menetapkan imej latar belakang kepada blok
sifat filter,
yang menetapkan gaya untuk latar belakang