Filtru de fundal - CSS-Tricks

Anonim

backdrop-filterProprietatea în CSS este utilizat pentru a aplica efecte de filtru ( grayscale, contrast, blur, etc) în fundal / fundalul unui element. Funcția backdrop-filterare același efect ca și filterproprietatea, cu excepția faptului că efectele de filtrare sunt aplicate numai pe fundal și în loc pe conținutul elementului.

Exemplu clasic:

Fundaluri filtrate fără filtru de fundal

Înainte backdrop-filter, singura modalitate de a adăuga un fundal filtrat era să adăugați un element „de fundal” separat, să îl poziționați în spatele elementelor de prim-plan și să îl filtrați astfel:

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

backdrop-filterProprietatea vă permite să elimine acest element suplimentar , „ de fond“ și de a aplica filtre pe fundalul direct:

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

La momentul scrierii, backdrop-filterface parte din proiectul editorului modulului 2 al efectelor filtrelor și nu face parte oficial din nici o specificație. Asistența pentru browser este limitată în prezent (consultați mai jos „Asistență pentru browser”).

Sintaxă

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

poate fi oricare dintre următoarele:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url() - (pentru aplicarea filtrelor SVG)

Puteți aplica mai multe s pe un fundal, astfel:

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

Consultați schița de lucru a modulului de efecte filtru W3C pentru valori acceptabile pentru fiecare dintre funcțiile de filtrare.

Exemplu

Pentru o privire cuprinzătoare asupra funcțiilor de filtrare și modalități inteligente de a le utiliza împreună, consultați filterintrarea almanahului din CSS-Tricks.

Următorul stilou este descris dintr-un exemplu din articolul lui Robin Rendle explorând backdrop-filter.

Suport pentru browser

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.

Desktop

Crom Firefox IE Margine Safari
76 Nu Nu 17 9 *

Mobil / Tabletă

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

Legate de

  • filter

Resurse

  • Proprietatea filtru de fundal de Robin Rendle
  • Intrare MDN pe fundal-filtru