`backdrop-filter` CSS property

Baseline 2024

Neu verfügbar

Seit September 2024 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Mit der CSS-Eigenschaft backdrop-filter können Sie grafische Effekte wie Weichzeichnung oder Farbverschiebung auf den Bereich hinter einem Element anwenden. Da sie auf alles hinter dem Element wirkt, muss das Element oder sein Hintergrund transparent oder teilweise transparent sein, damit der Effekt sichtbar wird.

Probieren Sie es aus

backdrop-filter: blur(10px);

backdrop-filter: invert(80%);

backdrop-filter: sepia(90%);

<section class="default-example" id="default-example">
  <div class="example-container">
    <div id="example-element">Example</div>
  </div>
</section>

.example-container {
  background-image: url("/shared-assets/images/examples/balloon.jpg");
  background-size: cover;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
}

#example-element {
  font-weight: bold;
  flex: 1;
  text-align: center;
  padding: 20px 10px;
  background-color: rgb(255 255 255 / 0.2);
}

Syntax

css

/* Keyword value */
backdrop-filter: none;

/* URL to SVG filter */
backdrop-filter: url("common-filters.svg#filter");

/* <filter-function> values */
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%);

/* Multiple filters */
backdrop-filter: url("filters.svg#filter") blur(4px) saturate(150%);

/* Global values */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert;
backdrop-filter: revert-layer;
backdrop-filter: unset;

Werte

none: Auf den Hintergrund wird kein Filter angewendet.
<filter-value-list>: Eine durch Leerzeichen getrennte Liste von <filter-function>s oder ein SVG-Filter, die auf den Hintergrund angewendet werden. Zu den CSS-<filter-function>s gehören blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate() und sepia().

Beschreibung

Die Eigenschaft backdrop-filter wendet Filtereffekte auf die Pixel an, die hinter einem Element dargestellt werden, bis zum nächsten Vorfahren, der eine Backdrop-Root ist. Inhalte oberhalb der Backdrop-Root sind nicht betroffen.

Backdrop-Root

Eine Backdrop-Root ist ein Element, das eine Grenze für backdrop-filter-Effekte festlegt. Die folgenden Elemente sind Backdrop-Roots:

Das Wurzelelement (<html>)
Ein Element mit einem anderen Wert für filter als none
Ein Element mit einem Wert für opacity kleiner als 1
Ein Element mit einem anderen Wert für mask, mask-image, mask-border oder clip-path als none
Ein Element mit einem anderen Wert für backdrop-filter als none
Ein Element mit einem anderen Wert für mix-blend-mode als normal
Ein Element, bei dem will-change auf eine der oben genannten Eigenschaften gesetzt ist

Wenn ein Elternelement beispielsweise opacity: 0.9 hat, wird es zur Backdrop-Root. Der backdrop-filter eines Kindelements zeichnet dann nur den Inhalt zwischen dem Elternelement und dem Kindelement weich – nicht den Inhalt hinter dem Elternelement. Dies führt häufig zu Verwirrung, wenn backdrop-filter trotz korrekter Anwendung scheinbar keinen sichtbaren Effekt hat.

Das folgende Beispiel zeigt, wie sich Backdrop-Roots auf backdrop-filter auswirken. Der erste Container hat will-change: opacity und ist damit eine Backdrop-Root. Beachten Sie, dass der weichzeichnende Kreis nur den Text und das Quadrat innerhalb des Containers beeinflusst, nicht aber den karierten Hintergrund dahinter. Der zweite Container ist keine Backdrop-Root. Sein weichzeichnender Kreis beeinflusst daher alles dahinter, einschließlich des Seitenhintergrunds.

html

<div class="parent backdrop-root">
  <div class="text">Text</div>
  <div class="square"></div>
  <div class="overlay"></div>
</div>
<div class="parent">
  <div class="text">Text</div>
  <div class="square"></div>
  <div class="overlay"></div>
</div>

css

body {
  display: flex;
  column-gap: 16px;
  padding: 16px;
  background-image: conic-gradient(
    gray 90deg,
    silver 90deg 180deg,
    gray 180deg 270deg,
    silver 270deg
  );
  background-size: 32px 32px;
}

.parent {
  position: relative;
  width: 256px;
  height: 256px;
}

.backdrop-root {
  outline: 2px solid crimson;
  will-change: opacity;
}

.square {
  position: absolute;
  top: 35px;
  left: 40%;
  width: 25%;
  height: 25%;
  border: 10px solid white;
}

.text {
  position: absolute;
  left: 40%;
  color: white;
  font-size: 32px;
  font-weight: 500;
  text-align: center;
  line-height: 256px;
  filter: blur(1px);
}

.overlay {
  position: absolute;
  top: 25%;
  left: 50%;
  width: 50%;
  height: 50%;
  outline: 3px solid gainsboro;
  border-radius: 9999px;
  backdrop-filter: blur(10px);
}

Formale Definition

Anfangswert	`none`
Anwendbar auf	alle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des `<defs>` Elements und allen Grafikelementen
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	eine Filterfunktionsliste

Formale Syntax

backdrop-filter = 
  none                 |
  <filter-value-list>  

<filter-value-list> = 
  [ <filter-function> | <url> ]+  

<filter-function> = 
  <blur()>         |
  <brightness()>   |
  <contrast()>     |
  <drop-shadow()>  |
  <grayscale()>    |
  <hue-rotate()>   |
  <invert()>       |
  <opacity()>      |
  <sepia()>        |
  <saturate()>     

<blur()> = 
  blur( <length>? )  

<brightness()> = 
  brightness( [ <number> | <percentage> ]? )  

<contrast()> = 
  contrast( [ <number> | <percentage> ]? )  

<drop-shadow()> = 
  drop-shadow( [ <color>? && <length>{2,3} ] )  

<grayscale()> = 
  grayscale( [ <number> | <percentage> ]? )  

<hue-rotate()> = 
  hue-rotate( [ <angle> | <zero> ]? )  

<invert()> = 
  invert( [ <number> | <percentage> ]? )  

<opacity()> = 
  opacity( [ <number> | <percentage> ]? )  

<sepia()> = 
  sepia( [ <number> | <percentage> ]? )  

<saturate()> = 
  saturate( [ <number> | <percentage> ]? )

Beispiele

HTML

html

<div class="container">
  <div class="box">
    <p>backdrop-filter: blur(10px)</p>
  </div>
</div>

CSS

css

.box {
  background-color: rgb(255 255 255 / 30%);
  backdrop-filter: blur(10px);
}

body {
  background-image: url("anemones.jpg");
}

html,
body {
  height: 100%;
  width: 100%;
}

.container {
  background-size: cover;
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.box {
  border-radius: 5px;
  font-family: sans-serif;
  text-align: center;
  max-width: 50%;
  max-height: 50%;
  padding: 20px 40px;
}

Ergebnis

Spezifikationen

Spezifikation
Filter Effects Module Level 2 # BackdropFilterProperty

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

backdrop-filter CSS property

Help improve MDN

`backdrop-filter` CSS property