Fons-filtrs - CSS-triki

Anonim

backdrop-filterĪpašums CSS tiek izmantota, lai piemērotu filtru efektus ( grayscale, contrast, bluruc), lai fona / fona elementa. Tam backdrop-filterir tāds pats efekts kā filterīpašumam, izņemot to, ka filtra efekti tiek lietoti tikai fonam, nevis elementa saturam.

Klasisks piemērs:

Filtrēti foni bez fona filtra

Iepriekš backdrop-filtervienīgais veids, kā pievienot filtrētu fonu, bija pievienot atsevišķu elementu “background”, novietot to aiz priekšplāna elementa (-iem) un filtrēt tā:

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

backdrop-filterĪpašums ļauj novērst šo papildu "fona" elements un piemērot filtrus, lai fona tieši:

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

Rakstīšanas laikā tā backdrop-filterir daļa no Filter Effects 2. moduļa redaktora melnraksta un oficiāli neietilpst nevienā specifikācijā. Pārlūkprogrammu atbalsts pašlaik ir ierobežots (skatiet sadaļu “Pārlūkprogrammas atbalsts” zemāk).

Sintakse

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

var būt kāds no šiem:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url() - (SVG filtru lietošanai)

Fonā varat lietot vairākus s, piemēram:

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

Skatiet W3C filtra efektu moduļa darba projektu, lai uzzinātu katras filtra funkcijas pieņemamās vērtības.

Piemērs

Visaptverošu pārskatu par filtru funkcijām un izveicīgiem veidiem, kā tos izmantot kopā, skatiet filteralmanaha ierakstā CSS-Tricks

Šis pildspalva ir izveidota no piemēra Robina Rendles rakstā, kurā tiek pētīts backdrop-filter.

Pārlūka atbalsts

Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.

Darbvirsma

Chrome Firefox IE Mala Safari
76 Nē Nē 17 9 *

Mobilais / planšetdators

Android Chrome Android Firefox Android iOS Safari
88 Nē 81. 9,0–9,2 *

Saistīts

  • filter

Resursi

  • Robina Rendles fona filtra rekvizīts
  • MDN ieraksts fona filtrā