Cách thực hiện - Thêm hiệu ứng hình ảnh
Tìm hiểu cách thêm hiệu ứng hình ảnh vào hình ảnh.
Bộ lọc hình ảnh
Bộ lọc CSS
Thuộc tính filter
CSS thêm các hiệu ứng hình ảnh (như độ mờ và độ bão hòa) vào một phần tử.
Lưu ý: Thuộc tính bộ lọc không được hỗ trợ trong Internet Explorer, Edge 12 hoặc Safari 5.1 trở về trước.
Ví dụ thang độ xám
Thay đổi màu của tất cả hình ảnh thành đen trắng (xám 100%):
img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
Ví dụ mờ
Áp dụng hiệu ứng làm mờ cho tất cả hình ảnh:
img {
-webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
filter: blur(5px);
}
Đi tới Thuộc tính bộ lọc CSS của chúng tôi để tìm hiểu thêm về bộ lọc CSS.