Cách tạo:

Học cách thêm hiệu ứng thị giác cho hình ảnh.

Bộ lọc hình ảnh

Thử ngay

CSS Filters

CSS filter Thuộc tính thêm hiệu ứng thị giác cho phần tử (như mờ và độ bão hòa).

Lưu ý:Internet Explorer, Edge 12 hoặc Safari 5.1 và các phiên bản sớm hơn không hỗ trợ filter Thuộc tính.

Mẫu đen trắng

Thay đổi màu sắc của tất cả các hình ảnh thành đen trắng (100% xám):

Tulip
Hình ảnh gốc
Tulip
Đen trắng (100%)
img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

Thử ngay

Mẫu mờ

Áp dụng hiệu ứng mờ cho tất cả các hình ảnh:

Tulip
Hình ảnh gốc
Tulip
Xử lý mờ (5 pixel)
img {
  -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
  filter: blur(5px);
}

Thử ngay

Trang liên quan

Tài liệu tham khảo:Thuộc tính filter CSS