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

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

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

#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

thuộc tính background,
đây là thuộc tính viết tắt cho nền
hàm blur,
làm mờ nền
hàm brightness,
thiết lập độ sáng cho nền
hàm contrast,
thiết lập độ tương phản cho nền
hàm drop-shadow,
thiết lập bóng đổ cho nền
hàm hue-rotate,
thiết lập màu sắc cho nền
hàm invert,
đảo ngược màu sắc của nền
hàm opacity,
thiết lập độ trong suốt cho nền
hàm sepia,
chuyển đổi nền thành màu sepia