Hintergrundfilter - CSS-Tricks

Anonim

Die backdrop-filterEigenschaft in CSS wird verwendet , Filtereffekte anzuwenden ( grayscale, contrast, blur, usw.) auf den Hintergrund / Hintergrund eines Elements. Das backdrop-filterhat den gleichen Effekt wie die filterEigenschaft, außer dass die Filtereffekte nur auf den Hintergrund und nicht auf den Inhalt des Elements angewendet werden.

Klassisches Beispiel:

Gefilterte Hintergründe ohne Hintergrundfilter

Zuvor backdrop-filterbestand die einzige Möglichkeit, einen gefilterten Hintergrund hinzuzufügen, darin, ein separates Hintergrundelement hinzuzufügen, es hinter den Vordergrundelementen zu positionieren und wie folgt zu filtern:

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

Mit dieser backdrop-filterEigenschaft können Sie dieses zusätzliche Hintergrundelement entfernen und Filter direkt auf den Hintergrund anwenden:

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

Zum Zeitpunkt des Schreibens backdrop-filterist er Teil des Entwurfs des Filter Effects Module 2-Editors und offiziell nicht Teil einer Spezifikation. Die Browserunterstützung ist derzeit eingeschränkt (siehe „Browserunterstützung“ weiter unten).

Syntax

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

kann eine der folgenden sein:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url() - (zum Anwenden von SVG-Filtern)

Sie können mehrere s auf einen Hintergrund anwenden , wie folgt:

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

Im Arbeitsentwurf des W3C-Filtereffektmoduls finden Sie akzeptable Werte für jede Filterfunktion.

Beispiel

Einen umfassenden Überblick über Filterfunktionen und die raffinierten Möglichkeiten, sie zusammen zu verwenden, finden Sie im filterAlmanach-Eintrag zu CSS-Tricks.

Der folgende Stift stammt aus einem Beispiel in Robin Rendles Artikel backdrop-filter.

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrom Feuerfuchs IE Kante Safari
76 Nein Nein 17 9 *

Handy / Tablet

Android Chrome Android Firefox Android iOS Safari
88 Nein 81 9,0-9,2 *

verbunden

  • filter

Ressourcen

  • Die Hintergrundfilter-Eigenschaft von Robin Rendle
  • MDN-Eintrag im Hintergrundfilter