Unkenntlichmachung und Farbverschiebung hinter einem Element
Durch Transparenz, Unkenntlichmachung und andere Effekte lassen sich Tiefe erzeugen und gleichzeitig der Kontext des Hintergrundinhalts beibehalten. Sie unterstützen eine Vielzahl von Anwendungsfällen, z. B. Milchglas, Video-Overlays, durchscheinende Navigationsüberschriften, die Zensierung unangemessener Bilder, das Laden von Bildern usw. Die folgenden Effekte sind Ihnen vielleicht bereits bei zwei gängigen Betriebssystemen bekannt: Windows 10 und iOS. <ph type="x-smartling-placeholder">
![Ein Beispiel für einen Milchglaseffekt.](https://web.dev/static/articles/backdrop-filter/image/an-example-a-frosted-gla-e73a5c4ccf301.jpg?authuser=6&hl=de)
In der Vergangenheit waren diese Techniken im Web schwer zu implementieren und erforderten weniger als perfekte Hacks oder Behelfslösungen. In den letzten Jahren haben sowohl Safari als auch Edge diese Funktionen über die background-filter
-Eigenschaft (und alternativ über die -webkit-backdrop-filter
-Eigenschaft) bereitgestellt, die die Farben von Vorder- und Hintergrundfarben abhängig von Filterfunktionen dynamisch vermischt. Chrome unterstützt jetzt background-filter
ab Version 76.
backdrop-filter
. Probiere das Beispiel auf CodePen aus.
Unterstützte Browser
Aus Leistungsgründen solltest du auf ein Bild anstelle eines Polyfills zurückgreifen, wenn backdrop-filter
nicht unterstützt wird. Im folgenden Beispiel sehen Sie das.
@supports (backdrop-filter: none) {
.background {
backdrop-filter: blur(10px);
}
}
@supports not (backdrop-filter: none) {
.background {
background-image: blurred-hero.png;
}
}
Grundlagen
- Die Eigenschaft
backdrop-filter
wendet einen oder mehrere Filter auf ein Element an und ändert die Darstellung aller dahinter liegenden Elemente. - Das Overlay-Element muss mindestens teilweise transparent sein.
- Das überlagernde Element erhält einen neuen Stapelkontext.
Die CSS-Datei backdrop-filter
wendet einen oder mehrere Effekte auf ein durchscheinendes oder transparentes Element an. Sehen Sie sich die folgenden Bilder an, um dies zu verstehen.
![Ein Dreieck über einem Kreis. Durch das Dreieck ist der Kreis nicht zu sehen.](https://web.dev/static/articles/backdrop-filter/image/a-triangle-superimposed-a7408c12ecfc6.png?authuser=6&hl=de)
.frosty-glass-pane { backdrop-filter: blur(2px); }
![Ein Dreieck über einem Kreis. Das Dreieck ist durchscheinend, sodass der Kreis durch das Dreieck hindurch sichtbar ist.](https://web.dev/static/articles/backdrop-filter/image/a-triangle-superimposed-f08e7aa317fea.png?authuser=6&hl=de)
.frosty-glass-pane { opacity: .9; backdrop-filter: blur(2px); }
Das Bild auf der linken Seite zeigt, wie überlappende Elemente gerendert würden, wenn backdrop-filter
nicht verwendet oder unterstützt würde. Im Bild rechts wird mit backdrop-filter
ein Unschärfeeffekt angewendet. Beachten Sie, dass zusätzlich zu backdrop-filter
opacity
verwendet wird. Ohne opacity
gäbe es nichts, auf das eine Unkenntlichmachung angewendet werden könnte. Selbstverständlich gibt es keine Auswirkungen auf den Hintergrund, wenn opacity
auf 1
(vollständig deckend) eingestellt ist.
Die backdrop-filter
-Eigenschaft ähnelt den CSS-Filtern insofern, als alle Ihre bevorzugten Filterfunktionen unterstützt werden: blur()
, brightness()
, contrast()
, opacity()
, drop-shadow()
usw. Außerdem wird die Funktion url()
unterstützt, wenn Sie ein externes Bild als Filter sowie die Keywords none
, inherit
, initial
und unset
verwenden möchten. Auf MDN finden Sie Erläuterungen zu all dem, einschließlich Beschreibungen von Syntax, Filtern und Werten.
Wenn backdrop-filter
auf einen anderen Wert als none
festgelegt ist, erstellt der Browser einen neuen Stapelkontext. Ein enthaltender Block kann ebenfalls erstellt werden, allerdings nur, wenn das Element über eine absolute und feste Position nachgeordnete Elemente hat.
Sie können Filter kombinieren, um umfassende und clevere Effekte zu erhalten, oder nur einen Filter verwenden, um subtilere oder präzisere Effekte zu erzielen. Sie können sie sogar mit SVG-Filtern kombinieren.
Beispiele
Designtechniken und -stile, die bisher für Betriebssysteme reserviert waren, sind jetzt mit einer einzigen CSS-Deklaration leistungsfähig und erreichbar. Sehen wir uns einige Beispiele an.
Einzelfilter
Im folgenden Beispiel wird der mattierte Effekt durch die Kombination von Farbe und Weichzeichnereffekt erzielt. Der Weichzeichner wird von backdrop-filter
bereitgestellt, während die Farbe von der halbtransparenten Hintergrundfarbe des Elements stammt.
.blur-behind-me {
background-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(.5rem);
}
Mehrere Filter
Manchmal sind mehrere Filter erforderlich, um den gewünschten Effekt zu erzielen. Geben Sie dazu eine Liste von Filtern an, die durch ein Leerzeichen getrennt sind. Beispiel:
.brighten-saturate-and-blur-behind-me {
backdrop-filter: brightness(150%) saturate(150%) blur(1rem);
}
Im folgenden Beispiel verfügt jedes der vier Bereiche über eine andere Kombination von Hintergrundfiltern, während dahinter der gleiche Satz von Formen animiert ist.
<ph type="x-smartling-placeholder">Overlays
In diesem Beispiel wird gezeigt, wie Sie einen halbtransparenten Hintergrund unkenntlich machen, damit Text gut lesbar ist, während er stilistisch mit dem Hintergrund einer Seite verschwimmt.
.modal {
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.5);
}
Textkontrast auf dynamischen Hintergründen
Wie bereits erwähnt, ermöglicht backdrop-filter
leistungsstarke Effekte, die im Web schwierig oder unmöglich wären. Ein Beispiel hierfür ist das Ändern eines Hintergrunds als Reaktion auf eine Animation. In diesem Beispiel behält backdrop-filter
den hohen Kontrast zwischen dem Text und dem Hintergrund bei, unabhängig davon, was sich dahinter verbirgt. Er beginnt mit der Standardhintergrundfarbe darkslategray
und verwendet backdrop-filter
, um die Farben nach der Transformation invertieren zu lassen.
.container::before {
z-index: 1;
background-color: darkslategray;
filter: invert(1);
}
.container::after {
backdrop-filter: invert(1);
z-index: 3;
}
Fazit
Mehr als 560 von Ihnen haben den Chromium-Fehler in den letzten Jahren hochgewählt und dies eindeutig als eine lang erwartete CSS-Funktion gekennzeichnet. Die Chrome-Version von backdrop-filter
in Version 76 bringt das Web einer wirklich Betriebssystem-ähnlichen UI-Präsentation einen Schritt näher.