CÁCH THỨC - 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 CSS filter
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ụ về thang độ xám
Thay đổi màu của tất cả hình ảnh thành đen trắng (100% xám):
img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
Original image
grayscale(100%)
Ví dụ làm mờ
Áp dụng hiệu ứng mờ cho tất cả các hình ảnh:
img {
-webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
filter: blur(5px);
}
Original image
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.