TABLE OF CONTENTS

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!

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:

  1. Tất tần tật về border-radius trong CSS
  2. Khác nhau giữa Background vs Background-Color trong CSS
  3. Tạo CSS Triangle đơn giản, nhanh chóng trong một nốt nhạc
  4. Khác nhau giữa display: none vs visibility: hidden trong CSS
  5. CSS Units - Tìm hiểu về REM và EM trong CSS
Có thể bạn thích ⚡
homiedev
About Me

Hi, I'm @devnav. Một người thích chia sẻ kiến thức, đặc biệt là về Frontend 🚀. Trang web này được tạo ra nhằm giúp các bạn học Frontend hiệu quả hơn 🎉😄.

Chúc các bạn tìm được kiến thức hữu ích trong blog này 😁😁.