Hàm hue-rotate

Hàm hue-rotate cho phép thay đổi màu sắc của hình ảnh nền bằng cách xoay sắc độ trên vòng màu. Giá trị của thuộc tính được chỉ định bằng độ, biểu thị góc trên vòng màu. Giá trị 0 hoặc 360 biểu thị, rằng hình ảnh vẫn giữ nguyên, và bất kỳ số nào nằm trong khoảng này sẽ dẫn đến thay đổi sắc độ của nền. Mặc định giá trị là 0deg.

Cú pháp

bộ chọn {
	filter: hue-rotate(góc);
}

Ví dụ

Hãy đặt màu sắc cho hình ảnh của chúng ta bằng 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;
}

Ví dụ

Bây giờ hãy đặt màu sắc của hình ảnh bằng 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;
}

Ví dụ

Hãy không đặt giá trị trong thuộc tính 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;
}

Xem thêm

hàm blur,
làm mờ nền
hàm brightness,
đặt độ sáng cho nền
hàm contrast,
đặt độ tương phản cho nền
hàm drop-shadow,
đặt bóng đổ cho nền
hàm invert,
đảo ngược màu sắc nền
hàm opacity,
đặt độ trong suốt cho nền
hàm sepia,
chuyển đổi nền thành sepia
thuộc tính background,
là thuộc tính viết tắt cho nền
thuộc tính background-image,
dùng để đặt hình ảnh nền cho khối
thuộc tính filter,
đặt kiểu cho nền