Hi 🤓 Cảm ơn bạn đã ghé thăm blog này, nếu những bài viết trên blog giúp ích cho bạn. Bạn có thể giúp blog hiển thị quảng cáo bằng cách tạm ngừng ad blocker 😫 và để giúp blog duy trì hoạt động nếu bạn muốn.
Cảm ơn bạn!
Cảm ơn bạn!
Tìm hiểu về Backdrop Filter trong CSS
backdrop-filter css là gì?
Thuộc tính backdrop-filter giúp bạn áp dụng các filter effect như blur, grayscale, contrast,...
Cú pháp:
backdrop-filter: filter-function | none
Danh sách các filter-function
:
- blur()
- brightness()
- contrast()
- drop-shadow()
- grayscale()
- hue-rotate()
- invert()
- opacity()
- saturate()
- sepia()
- url() – (for applying SVG filters)
Các bạn có thể áp dụng nhiều filter như sau:
backdrop-filter: grayscale(.7) blur(5px) opacity(1) ...;
Sau đây là 1 ví dụ chúng ta có thể xem ở bên dưới:
backdrop-filter chưa hỗ trợ trên trình duyệt IE và Firefox.
Như vậy là mình đã giới thiệu xong cho các bạn cách sử dụng backdrop-filter
. Đây là hiệu ứng nếu áp dụng đúng cách sẽ rất đẹp đúng không nào 😀.
Chúc các bạn học tập tốt. Hẹn gặp các bạn ở những bài viết sắp tới ^^.
Một số bài viết nên đọc:
Có thể bạn thích ⚡