Achtergrondfilter - CSS-trucs

Anonim

De backdrop-filtereigenschap in CSS wordt gebruikt om filter effecten (van toepassing grayscale, contrast, blur, etc) om de achtergrond / achtergrond van een element. Het backdrop-filterheeft hetzelfde effect als de filtereigenschap, behalve dat de filtereffecten alleen op de achtergrond worden toegepast en in plaats van op de inhoud van het element.

Klassiek voorbeeld:

Gefilterde achtergronden zonder achtergrondfilter

Vroeger backdrop-filterwas de enige manier om een ​​gefilterde achtergrond toe te voegen, door een afzonderlijk "achtergrond" -element toe te voegen, het achter het voorgrondelement (en) te plaatsen en het als volgt te filteren:

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

Met de backdrop-filtereigenschap kunt u dit extra "achtergrond" -element verwijderen en rechtstreeks filters op de achtergrond toepassen:

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

Op het moment van schrijven backdrop-filtermaakt het deel uit van de Filter Effecten Module 2 Editor's Draft en maakt officieel geen deel uit van een specificatie. Browserondersteuning is momenteel beperkt (zie "Browserondersteuning" hieronder).

Syntaxis

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

kan een van de volgende zijn:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url() - (voor het toepassen van SVG-filters)

U kunt meerdere s op een achtergrond toepassen , zoals:

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

Zie de W3C Filter Effects Module Working Draft voor acceptabele waarden voor elk van de filterfuncties.

Voorbeeld

Voor een uitgebreid overzicht van filterfuncties en handige manieren om ze samen te gebruiken, zie het filteralmanak-artikel over CSS-Tricks.

De volgende pen is een splitsing van een voorbeeld in Robin Rendle's artikel over verkennen backdrop-filter.

Browser-ondersteuning

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.

Bureaublad

Chrome Firefox D.W.Z Rand Safari
76 Nee Nee 17 9 *

Mobiel / tablet

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

Verwant

  • filter

Middelen

  • De achtergrondfilter-eigenschap van Robin Rendle
  • MDN-item op achtergrondfilter