filter

Sie können url() verwenden, um ein SVG Filter-Element zu referenzieren. Für eine Referenz zu einem SVG <filter> Element verwenden Sie die folgende Syntax:

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

Die filter Eigenschaft wird als none oder eine oder mehrere der unten aufgeführten Funktionen angegeben. Wenn der Parameter einer Funktion ungültig ist, gibt die Funktion none zurück. Mit Ausnahme der erwähnten Fälle akzeptieren die Funktionen, die einen Wert mit einem Prozentzeichen ausdrücken (wie in 34%), auch den als Dezimalwert ausgedrückten Wert (wie in 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% erhöhen den Kontrast.

css

filter: contrast(200%);

drop-shadow()

Wendet den Parameter <shadow> als Schlagschatten an, der den Konturen des Bildes folgt. Die Schattensyntax ähnelt <box-shadow> (definiert im CSS backgrounds and borders module), mit der Ausnahme, dass das inset Schlüsselwort und der spread Parameter nicht zulässig 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 die Eingabe unverändert. Werte zwischen 0% und 100% erzeugen lineare Multiplikatoren auf den Effekt.

css

filter: grayscale(100%);

hue-rotate()

Wendet eine Farbton-Drehung an. Der <angle> Wert definiert die Anzahl der Grad auf dem Farbkreis, um die die Eingabemuster angepasst werden. Ein Wert von 0deg lässt die Eingabe unverändert.

css

filter: hue-rotate(90deg);

invert()

Invertiert die Muster im Eingabebild. Ein Wert von 100% invertiert das Bild vollständig. Ein Wert von 0% lässt die Eingabe 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 komplett 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 einen Sepiaton um, wobei ein Wert von 100% das Bild vollständig sepia färbt und 0% keine Veränderung bewirkt.

css

filter: sepia(100%);

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

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

Wenn animiert, und sowohl die Anfangs- als auch die Endfilter haben eine Funktionsliste gleicher Länge ohne <url> in derselben Reihenfolge, 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 verwenden ihre Anfangswerte, die keine Filtermodifikation sind. Alle aufgelisteten Filter werden dann entsprechend den spezifischen Regeln der Filterfunktion interpoliert. Andernfalls wird diskrete Interpolation verwendet.

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

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

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);
}

<img src="pencil.jpg" alt="Original image is sharp" />
<img src="pencil.jpg" alt="The image and border are blurred and muted" />

Filterfunktionen werden in der Reihenfolge ihres Erscheinens angewendet. Die gleiche Filterfunktion kann wiederholt werden.

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

<svg
  id="MDN-logo"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 361 104.2"
  xml:space="preserve"
  role="img">
  <title>MDN Web Docs</title>
  <path
    d="M197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z"></path>
  <g fill="blue">
    <path
      d="M42 .2 13.4 92.3H1.7L30.2.2H42zM52.4.2v92.1H42V.2h10.4zm40.3 0L64.2 92.3H52.5L81 .2h11.7zM103.1.2v92.1H92.7V.2h10.4zM294 95h67v8.8h-67V95z"></path>
  </g>
</svg>

Die Filter werden in der angegebenen Reihenfolge angewendet. Deshalb haben die Schlagschatten nicht die gleiche Farbe: Der erste Schlagschatten wird durch die hue-rotate() Funktion im Farbton verändert, der zweite jedoch nicht.

• backdrop-filter
• mask
• SVG filter Attribut
• CSS Compositing und Blending Modul, einschließlich der CSS background-blend-mode und mix-blend-mode Eigenschaften.
• SVG, einschließlich des SVG <filter> Elements und des SVG filter Attributs.
• Anwenden von SVG-Effekten auf HTML-Inhalt