Thuộc tính filter

Thuộc tính filter thiết lập một kiểu nghệ thuật hoặc bộ lọc nhất định cho hình nền. Thuộc tính có thể nhận tên các kiểu nghệ thuật được tạo bởi hàm filter hoặc none (hủy bỏ bộ lọc đã chọn) làm giá trị.

Cú pháp

cssbộ chọn {
  filter: kiểu nghệ thuật hoặc none;
}

Ví dụ

Hãy thiết lập bộ lọc đen trắng cho hình ảnh của chúng ta và hủy bỏ nó khi di chuột qua:

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

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

Результат:

Xem thêm