Fungsi hue-rotate

Fungsi hue-rotate memungkinkan untuk mengubah warna gambar latar belakang dengan memutar rona pada lingkaran warna. Nilai properti ditentukan dalam derajat, yang menunjukkan sudut lingkaran warna. Nilai 0 atau 360 menunjukkan bahwa gambar tetap tidak berubah, dan angka apa pun yang terletak di dalam rentang ini menyebabkan perubahan rona latar belakang. Secara default, nilainya adalah 0deg.

Sintaksis

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

Contoh

Mari kita atur warna gambar kita menjadi 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 atur warna gambar menjadi 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 menetapkan nilai dalam properti 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 mengatur kecerahan latar belakang
fungsi contrast,
yang mengatur kontras latar belakang
fungsi drop-shadow,
yang mengatur bayangan untuk latar belakang
fungsi invert,
yang membalikkan warna latar belakang
fungsi opacity,
yang mengatur transparansi latar belakang
fungsi sepia,
yang mengubah latar belakang menjadi sepia
properti background,
yang merupakan properti singkatan untuk latar belakang
properti background-image,
yang dapat digunakan untuk menetapkan gambar latar belakang ke blok
properti filter,
yang mengatur gaya untuk latar belakang