Hàm hue-rotate() trong CSS

Trang trước Hàm hsl() CSS
Trang tiếp theo Hàm hwb() CSS
Quay lại lớp trên Sách tham khảo hàm CSS

Định nghĩa và cách sử dụng

CSS hue-rotate() Hàm lọc áp dụng sự xoay màu cho phần tử.

Mô hình

Mẫu 1

Đặt màu xoay khác nhau cho hình ảnh:

#img1 {
  filter: hue-rotate(200deg);
}
#img2 {
  filter: hue-rotate(90deg);
}
#img3 {
  filter: hue-rotate(-90deg);
}

Thử ngay

Mẫu 2

để hue-rotate() với backdrop-filter Kết hợp sử dụng thuộc tính:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: hue-rotate(90deg);
  backdrop-filter: hue-rotate(90deg);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

Thử ngay

Cú pháp CSS

hue-rotate(góc)

Giá trị	Mô tả
góc	Tùy chọn. Định nghĩa một góc để biểu thị sự thay đổi tương đối của màu mẫu đầu vào. Giá trị dương sẽ tăng giá trị màu, giá trị âm sẽ giảm giá trị màu. 0deg biểu thị hình ảnh gốc (không có hiệu ứng). Giá trị mặc định là 0.

Giá trị

Mô tả

góc

Tùy chọn. Định nghĩa một góc để biểu thị sự thay đổi tương đối của màu mẫu đầu vào.

Giá trị dương sẽ tăng giá trị màu, giá trị âm sẽ giảm giá trị màu.

0deg biểu thị hình ảnh gốc (không có hiệu ứng).

Giá trị mặc định là 0.