Ngọc Thanh - 31
- 19/07/2025
Ngọc Thanh Thuộc tính filter trong CSS là một loại thuộc tính của CSS dùng để áp dụng các hiệu ứng như làm mờ, thay đổi độ sáng, độ tương phản,.... lên các thẻ HTML, chi tiết như nào hãy cùng chúng tôi phân tích:
Thuộc tính filter trong CSS
Thuộc tính filter trong CSS là gì?
Thuộc tính filter trong CSS là một loại thuộc tính của CSS dùng để áp dụng các hiệu ứng như làm mờ, thay đổi độ sáng, độ tương phản,.... lên các thẻ HTML, giúp giao diện website trở nên sinh động hơn và ứng dụng được nhiều yêu cầu.
Các giá trị của Thuộc tính filter trong CSS
Css filter grayscale
Chuyển sang thang màu xám, giá trị từ 0% đến 100%.
img{filter:grayscale(100%)}
Css filter brightness
Làm sáng hoặc làm tối hình ảnh, thẻ html khác, mốc của hình gốc là 100% hoặc 1.
img{filter: brightness(150%);}
Css filter saturate
Giá trị: saturate() nhận một giá trị không âm, có thể là số thập phân hoặc phần trăm, thể hiện mức độ bão hòa.
100% (hoặc 1): Giữ nguyên màu gốc, không thay đổi độ bão hòa.
> 100% (hoặc > 1): Tăng độ bão hòa, làm cho màu sắc trở nên rực rỡ hơn.
< 100% (hoặc < 1): Giảm độ bão hòa, làm cho màu sắc trở nên nhạt hơn, gần như xám.
img{filter: saturate(200%);}
Css filter contrast
Giúp tăng độ tương phản của hình ảnh, tăng giảm đều được và có thể chuyển về màu xám.
img{filter: contrast(150%);}
Css filter blur
Làm mờ hình ảnh từ 1px trở lên.
img{filter:blur(5px);}
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính filter trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
