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

cssbộ 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:

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

css#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:

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

css#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:

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

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

Результат:

Xem thêm