CSS backdrop-filterEigenschaft
Beispiel
Grafische Effekte für den Bereich hinter dem Element hinzufügen:
.box {
background-color: rgba(255, 255, 255, 0.3);
border-radius: 5px;
font-family: sans-serif;
text-align: center;
line-height: 1;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
max-width: 50%;
max-height: 50%;
padding: 20px 40px;
}
Selbst ausprobieren »
Browser-Unterstützung
Zahlen in der Tabelle geben die erste Browserversion an, die diese Eigenschaft unterstützt.
Die Zahl unmittelbar vor -webkit-, -ms- oder -moz- ist die erste Browserversion, die die mit Präfix versehene Eigenschaft unterstützt.
| Eigenschaft | |||||
|---|---|---|---|---|---|
| backdrop-filter | 76 | 17 | 103 | 9.0 -webkit- |
63 |
Tag-Definition und Verwendungshinweise
Die CSS-Eigenschaft backdrop-filter ermöglicht es Ihnen, grafische Effekte (wie Unschärfe oder Farbverschiebung) auf den Bereich hinter einem Element anzuwenden.
Da sie auf alles hinter dem Element angewendet wird, muss das Element oder sein Hintergrund mindestens teilweise transparent sein, um den Effekt zu sehen.
Syntax
backdrop-filter: <filter-function-list>
| Wert | Beschreibung |
|---|---|
| none | Auf den Hintergrund wird kein Filter angewendet. |
| <filter-function-list> | Eine durch Leerzeichen getrennte Liste von Filterfunktionen (<filter-function>) oder ein SVG-Filter, der auf den Hintergrund angewendet werden soll. |
/* Schlüsselwortwerte */
backdrop-filter: none;
/* URL, die auf einen SVG-Filter verweist */
backdrop-filter: url(commonfilters.svg#filter);
/* <filter-function> Filterfunktionswerte */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);
/* Mehrere Filter */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
/* Globale Werte */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert;
backdrop-filter: unset;
backdrop-filter: none;
/* URL, die auf einen SVG-Filter verweist */
backdrop-filter: url(commonfilters.svg#filter);
/* <filter-function> Filterfunktionswerte */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);
/* Mehrere Filter */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
/* Globale Werte */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert;
backdrop-filter: unset;