Bộ lọc CSS là gì?

Bộ lọc CSS cho phép bạn áp dụng các hiệu ứng đồ họa như làm mờ hoặc thay đổi màu sắc cho một phần tử. Chúng thường được sử dụng cho hình ảnh, hình nền và đường viền.

Bộ lọc có thể được sử dụng để tạo hiệu ứng hình ảnh, nâng cao hình ảnh hoặc tạo các yếu tố thiết kế độc đáo mà không cần các công cụ chỉnh sửa hình ảnh bên ngoài.

Thuộc tính bộ lọc CSS được hỗ trợ

• blur()- Áp dụng hiệu ứng mờ Gaussian cho phần tử.
• brightness()- Điều chỉnh độ sáng của phần tử.
• contrast()- Điều chỉnh độ tương phản của phần tử.
• grayscale()- Chuyển đổi phần tử thành thang độ xám.
• hue-rotate()- Áp dụng xoay màu cho phần tử.
• invert()- Đảo ngược màu sắc của phần tử.
• opacity()- Điều chỉnh độ mờ của phần tử.
• saturate()- Bão hòa hoặc khử bão hòa nguyên tố.
• sepia()- Chuyển đổi phần tử thành màu nâu đỏ.

Cách áp dụng bộ lọc

Sử dụng mã CSS do công cụ này tạo, bạn có thể áp dụng bộ lọc cho bất kỳ phần tử HTML nào. Đây là cách thực hiện:

.filtered-image { filter: blur(5px) brightness(110%) contrast(120%); }

filter: blur(2px) brightness(110%) contrast(120%) saturate(150%);

Khả năng tương thích của trình duyệt

Bộ lọc CSS được hỗ trợ rộng rãi trong các trình duyệt hiện đại, bao gồm Chrome, Firefox, Safari, Edge và Opera. Tuy nhiên, các trình duyệt cũ hơn như Internet Explorer không hỗ trợ chúng.