Penapis latar - Trik CSS

Anonim

The backdrop-filterharta di CSS digunakan untuk memohon kesan penapis ( grayscale, contrast, blur, dan lain-lain) kepada latar belakang / latar belakang unsur. Ini backdrop-filtermempunyai kesan yang sama dengan filterharta tanah, kecuali kesan penapis hanya diterapkan pada latar belakang dan bukan pada isi elemen.

Contoh klasik:

Latar Belakang yang ditapis tanpa penapis latar

Sebelumnya backdrop-filter, satu-satunya cara untuk menambahkan latar belakang yang difilter adalah dengan menambahkan elemen "latar belakang" yang terpisah, meletakkannya di belakang elemen latar depan dan menyaringnya seperti itu:

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

Properti backdrop-filterini membolehkan anda menghilangkan elemen "latar belakang" tambahan ini dan menggunakan penapis ke latar belakang secara langsung:

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

Pada masa penulisan, backdrop-filteradalah sebahagian daripada Draf Editor Modul Kesan Saringan 2 dan bukan sebahagian daripada spesifikasi secara rasmi. Sokongan penyemak imbas pada masa ini terhad (lihat "Sokongan Penyemak Imbas" di bawah).

Sintaks

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

boleh menjadi salah satu daripada yang berikut:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url() - (untuk menggunakan penapis SVG)

Anda boleh menggunakan beberapa s ke latar belakang, seperti:

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

Lihat Draf Kerja Modul Kesan Penapis W3C untuk nilai yang boleh diterima untuk setiap fungsi penapis.

Contohnya

Untuk melihat secara menyeluruh fungsi penapis dan cara yang bagus untuk menggunakannya bersama-sama, lihat filterentri almanak pada CSS-Tricks.

Pena berikut dibentuk dari contoh dalam artikel Robin Rendle yang meneroka backdrop-filter.

Sokongan Penyemak Imbas

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.

Desktop

Chrome Firefox IE Hujung Safari
76 Tidak Tidak 17 9 *

Mudah Alih / Tablet

Android Chrome Android Firefox Android Safari iOS
88 Tidak 81 9.0-9.2 *

Berkaitan

  • filter

Sumber

  • Harta penapis latar oleh Robin Rendle
  • Entri MDN pada backdrop-filter