Bộ lọc phông nền - Thủ thuật CSS

Anonim

Các backdrop-filterbất động sản trong CSS được sử dụng để áp dụng hiệu ứng bộ lọc ( grayscale, contrast, blur, vv) để nền / bối cảnh của một phần tử. Tác backdrop-filterdụng tương tự như thuộc filtertính, ngoại trừ các hiệu ứng bộ lọc chỉ được áp dụng cho nền và thay vì cho nội dung của phần tử.

Ví dụ cổ điển:

Nền được lọc mà không có bộ lọc phông nền

Trước đây backdrop-filter, cách duy nhất để thêm nền đã lọc là thêm một phần tử “nền” riêng biệt, đặt nó phía sau (các) phần tử nền trước và lọc nó như sau:

 
.background ( filter: blur(4px); position: absolute; width: 100%; height: 100%; )

Các backdrop-filterbất động sản cho phép bạn loại bỏ thêm yếu tố “nền” này và áp dụng bộ lọc để bối cảnh trực tiếp:

.foreground ( backdrop-filter: blur(10px); ) /* No .wrapper needed! */

Tại thời điểm viết bài, backdrop-filterlà một phần của Dự thảo của Người biên tập Mô-đun Hiệu ứng Bộ lọc 2 và không chính thức là một phần của bất kỳ thông số kỹ thuật nào. Hỗ trợ trình duyệt hiện bị giới hạn (xem “Hỗ trợ trình duyệt” bên dưới).

Cú pháp

.element ( backdrop-filter: ()* | none )

có thể là bất kỳ điều nào sau đây:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url() - (để áp dụng bộ lọc SVG)

Bạn có thể áp dụng nhiều s cho một phông nền, như sau:

.element ( backdrop-filter: grayscale(0.5) opacity(0.8) /*… and on and on… */; )

Xem Bản thảo làm việc của mô-đun hiệu ứng bộ lọc W3C để biết các giá trị được chấp nhận cho từng chức năng của bộ lọc.

Thí dụ

Để có cái nhìn toàn diện về các chức năng bộ lọc và các cách tiện lợi để sử dụng chúng cùng nhau, hãy xem filtermục nhập niên giám trên CSS-Tricks.

Bút sau đây được tách ra từ một ví dụ trong bài viết khám phá của Robin Rendle backdrop-filter.

Hỗ trợ trình duyệt

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.

Máy tính để bàn

Trình duyệt Chrome Firefox I E Cạnh Safari
76 Không Không 17 9 *

Di động / Máy tính bảng

Chrome dành cho Android Android Firefox Android iOS Safari
88 Không 81 9,0-9,2 *

Có liên quan

  • filter

Tài nguyên

  • Thuộc tính bộ lọc phông nền của Robin Rendle
  • Mục nhập MDN trên bộ lọc phông nền