filter

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

* Some parts of this feature may have varying levels of support.

Die filter CSS Eigenschaft wendet grafische Effekte wie Unschärfe oder Farbverschiebung auf ein Element an. Filter werden häufig verwendet, um die Darstellung von Bildern, Hintergründen und Rändern anzupassen.

Es stehen verschiedene Funktionen zur Verfügung, wie blur() und contrast(), um vordefinierte Effekte zu erzielen.

Probieren Sie es aus

filter: url("/shared-assets/images/examples/shadow.svg#element-id");

filter: blur(5px);

filter: contrast(200%);

filter: grayscale(80%);

filter: hue-rotate(90deg);

filter: drop-shadow(16px 16px 20px red) invert(75%);

<section id="default-example">
  <div class="example-container">
    <img
      id="example-element"
      src="/shared-assets/images/examples/firefox-logo.svg"
      width="200" />
  </div>
</section>

.example-container {
  background-color: #fff;
  width: 260px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#example-element {
  flex: 1;
  padding: 30px;
}

Syntax

css
/* <filter-function> values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* URL */
filter: url("filters.svg#filter-id");

/* Multiple filters */
filter: contrast(175%) brightness(3%);
filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px blue);

/* Use no filter */
filter: none;

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

Mit einer Funktion verwenden Sie folgendes:

css
filter: <filter-function> [<filter-function>]* | none;

Sie können url() nutzen, um auf ein SVG filter element zu verweisen. Für einen Verweis auf ein SVG <filter>-Element verwenden Sie die folgende Syntax:

css
filter: url(file.svg#filter-element-id);

Funktionen

Die filter Eigenschaft wird als none oder eine oder mehrere der unten aufgeführten Funktionen spezifiziert. Ist der Parameter für eine Funktion ungültig, gibt die Funktion none zurück. Außer dort, wo es vermerkt ist, akzeptieren die Funktionen, die einen Wert in Prozentzeichen (z.B. 34%) nehmen, auch den Wert als Dezimalzahl (z.B. 0.34).

Wenn die filter Eigenschaftswerte mehrere Funktionen enthalten, werden die Filter in der angegebenen Reihenfolge angewendet.

blur()

Wendet eine Gaußsche Unschärfe auf das Eingabebild an.

css
filter: blur(5px);
brightness()

Wendet einen linearen Multiplikator auf das Eingabebild an, wodurch es heller oder dunkler erscheint. Die Werte sind lineare Multiplikatoren auf den Effekt, wobei 0% ein komplett schwarzes Bild erzeugt, 100% keinen Effekt hat und Werte über 100% das Bild aufhellen.

css
filter: brightness(2);
contrast()

Passt den Kontrast des Eingabebildes an. Ein Wert von 0% macht das Bild grau, 100% hat keinen Effekt, und Werte über 100% erzeugen einen stärkeren Kontrast.

css
filter: contrast(200%);
drop-shadow()

Wendet den Parameter <shadow> als Schlagschatten an, der den Konturen des Bildes folgt. Die Schattensyntax ist ähnlich wie <box-shadow> (definiert im CSS backgrounds and borders module), mit der Ausnahme, dass das Schlüsselwort inset und der spread-Parameter nicht erlaubt sind. Wie bei allen filter Eigenschaftswerten werden alle Filter nach dem drop-shadow() auf den Schatten angewendet.

css
filter: drop-shadow(16px 16px 10px black);
grayscale()

Wandelt das Bild in Graustufen um. Ein Wert von 100% ist komplett in Graustufen. Der Anfangswert von 0% lässt das Eingabebild unverändert. Werte zwischen 0% und 100% erzeugen lineare Multiplikatoren auf den Effekt.

css
filter: grayscale(100%);
hue-rotate()

Wendet eine Farbtonrotation an. Der <angle> Wert definiert die Anzahl der Grad auf dem Farbtonfarbkreis, um die die Eingabemuster angepasst werden. Ein Wert von 0deg lässt das Eingabebild unverändert.

css
filter: hue-rotate(90deg);
invert()

Kehrt die Muster im Eingabebild um. Ein Wert von 100% kehrt das Bild vollständig um. Ein Wert von 0% lässt das Eingabebild unverändert. Werte zwischen 0% und 100% haben lineare Multiplikatoren auf den Effekt.

css
filter: invert(100%);
opacity()

Wendet Transparenz an. 0% macht das Bild völlig transparent und 100% lässt das Bild unverändert.

css
filter: opacity(50%);
saturate()

Sättigt das Bild, wobei 0% völlig entsättigt ist, 100% das Bild unverändert lässt und Werte über 100% die Sättigung erhöhen.

css
filter: saturate(200%);
sepia()

Wandelt das Bild in Sepia um, wobei ein Wert von 100% das Bild vollständig in Sepia und 0% keine Änderung bewirkt.

css
filter: sepia(100%);

Funktionen kombinieren

Sie können eine beliebige Anzahl von Funktionen kombinieren, um die Darstellung zu manipulieren. Die Filter werden in der erklärten Reihenfolge angewendet. Das folgende Beispiel verbessert den Kontrast und die Helligkeit des Bildes:

css
filter: contrast(175%) brightness(103%);

Interpolation

Wenn animiert, und sowohl die Anfangs- als auch die Endfilter eine Funktionsliste mit derselben Länge ohne <url> in der gleichen Reihenfolge aufweisen, wird jede ihrer Filterfunktionen entsprechend den spezifischen Regeln der Filterfunktion interpoliert.

Wenn die Filterlisten unterschiedliche Längen haben, werden die fehlenden äquivalenten Filterfunktionen aus der längeren Liste am Ende der kürzeren Liste hinzugefügt. Die hinzugefügten Funktionen nutzen ihre anfänglichen, keinen Filter modifizierenden Werte. Alle aufgeführten Filter werden dann entsprechend den spezifischen Regeln der Filterfunktion interpoliert. Andernfalls wird diskrete Interpolation verwendet.

Formale Definition

Anfangswertnone
Anwendbar aufalle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des <defs> Elements und allen Grafikelementen
VererbtNein
Berechneter Wertwie angegeben
Animationstypeine Filterfunktionsliste

Formale Syntax

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()>     

<url> = 
  <url()>  |
  <src()>  

<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> ]? )  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

Beispiele

Anwendungsbeispiele für Filterfunktionen

Die filter Eigenschaft wird auf das zweite Bild angewendet, wodurch sowohl das Bild als auch dessen Rahmen ausgegraut und unscharf werden.

css
img {
  border: 5px solid yellow;
}
/* Gray the second image by 40% and blur by 5px */
img:nth-of-type(2) {
  filter: grayscale(0.4) blur(5px);
}
html
<img src="pencil.jpg" alt="Original image is sharp" />
<img src="pencil.jpg" alt="The image and border are blurred and muted" />

Wiederholen von Filterfunktionen

Filterfunktionen werden in der Reihenfolge ihres Auftretens angewendet. Dieselbe Filterfunktion kann wiederholt werden.

css
#MDN-logo {
  border: 1px solid blue;
  filter: drop-shadow(5px 5px 0 red) hue-rotate(180deg)
    drop-shadow(5px 5px 0 red);
}

Die Filter werden in der Reihenfolge angewendet. Daher sind die Schlagschatten nicht von derselben Farbe: Der erste Schlagschatten wird durch die hue-rotate()-Funktion in seinem Farbton verändert, der zweite jedoch nicht.

Spezifikationen

Specification
Filter Effects Module Level 1
# FilterProperty

Browser-Kompatibilität

Siehe auch