Backdrop-filter | CSS-Tricks

Die CSS-Eigenschaft backdrop-filter wird verwendet, um Filtereffekte (grayscale, contrast, blur usw.) auf den Hintergrund/das Backdrop eines Elements anzuwenden. Der backdrop-filter hat die gleiche Wirkung wie die filter-Eigenschaft, außer dass die Filtereffekte *nur* auf den Hintergrund und *anstatt* auf den Inhalt des Elements angewendet werden.

Klassisches Beispiel

Gefilterte Hintergründe ohne `backdrop-filter`

Vor backdrop-filter war die einzige Möglichkeit, einen gefilterten Hintergrund hinzuzufügen, ein separates „Hintergrund“-Element hinzuzufügen, es hinter den Vordergrundelementen zu positionieren und es wie folgt zu filtern.

<div class="wrapper">
  <div class="background"></div>
  <div class="foreground"></div>
</div>

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

Die Eigenschaft backdrop-filter ermöglicht es Ihnen, dieses zusätzliche „Hintergrund“-Element zu eliminieren und Filter direkt auf das Backdrop anzuwenden.

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

Zum Zeitpunkt des Schreibens ist backdrop-filter Teil des Filter Effects Module 2 Editor’s Draft und nicht offiziell Teil einer Spezifikation. Die Browserunterstützung ist derzeit begrenzt (siehe unten).

Syntax

.element {
  backdrop-filter: <filter-function> [<filter-function>]* | none
}

kann einer 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 <filter-function>s auf ein Backdrop anwenden, wie hier:

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

Siehe das W3C Filter Effects Module Working Draft für akzeptable Werte für jede der Filterfunktionen.

Beispiel

Für einen umfassenden Überblick über Filterfunktionen und ausgeklügelte Möglichkeiten, sie zusammen zu verwenden, siehe den filter-Almanac-Eintrag auf CSS-Tricks.

Der folgende Pen ist ein Fork eines Beispiels aus Robin Rendles Artikel über die backdrop-filter-CSS-Eigenschaft.

Browser-Unterstützung

Diese Browserunterstützungsdaten stammen von Caniuse, wo weitere Details zu finden sind. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version und aufwärts unterstützt.