Unkenntlichmachung und Farbverschiebung hinter einem Element
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-filterwendet 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.
.frosty-glass-pane {
backdrop-filter: blur(2px);
}
.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.
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.