filter
Die filter
CSS-Eigenschaft wendet grafische Effekte wie Unschärfe oder Farbänderung auf ein Element an. Filter werden häufig verwendet, um die Darstellung von Bildern, Hintergründen und Rahmen anzupassen.
Mehrere Funktionen, wie blur()
und contrast()
, stehen zur Verfügung, um vordefinierte Effekte zu erzielen.
Probieren Sie es aus
Syntax
/* <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:
filter: <filter-function> [<filter-function>]* | none;
Sie können url()
verwenden, um auf ein SVG-Filterelement zu verweisen. Für einen Verweis auf ein SVG <filter>
-Element verwenden Sie die folgende Syntax:
filter: url(file.svg#filter-element-id);
Funktionen
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. Außer wenn notiert, akzeptieren die Funktionen, die einen Wert in Prozent ausdrücken (wie in 34%
), auch den Wert als Dezimalzahl (wie in 0.34
).
Wenn die Werte der filter
-Eigenschaft mehrere Funktionen enthalten, werden die Filter in der angegebenen Reihenfolge angewendet.
blur()
-
Wendet eine Gaußsche Unschärfe auf das Eingabebild an.
cssfilter: blur(5px);
brightness()
-
Wendet einen linearen Multiplikator auf das Eingabebild an, sodass es heller oder dunkler erscheint. Die Werte sind lineare Multiplikatoren auf den Effekt, wobei
0%
ein komplett schwarzes Bild erzeugt,100%
keine Wirkung hat und Werte über100%
das Bild aufhellen.cssfilter: brightness(2);
contrast()
-
Passt den Kontrast des Eingabebildes an. Ein Wert von
0%
macht das Bild grau,100%
hat keine Wirkung und Werte über100%
erzeugen einen Kontrast.cssfilter: 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 Hintergründe- und Rahmen-Modul), mit der Ausnahme, dass das Schlüsselwortinset
und der Parameterspread
nicht erlaubt sind. Wie bei allenfilter
-Eigenschaftswerten werden alle Filter nachdrop-shadow()
auf den Schatten angewendet.cssfilter: drop-shadow(16px 16px 10px black);
grayscale()
-
Konvertiert das Bild in Graustufen. Ein Wert von
100%
ist komplett in Graustufen. Der Anfangswert von0%
belässt das Eingabebild unverändert. Werte zwischen0%
und100%
erzeugen lineare Multiplikatoren auf den Effekt.cssfilter: grayscale(100%);
hue-rotate()
-
Wendet eine Farbtonrotation an. Der
<angle>
-Wert definiert die Anzahl der Grad um den Farbkreis, die die Eingabemuster angepasst werden. Ein Wert von0deg
belässt das Eingabebild unverändert.cssfilter: hue-rotate(90deg);
invert()
-
Kehrt die Muster im Eingabebild um. Ein Wert von
100%
kehrt das Bild komplett um. Ein Wert von0%
belässt das Eingabebild unverändert. Werte zwischen0%
und100%
haben lineare Multiplikatoren auf den Effekt.cssfilter: invert(100%);
opacity()
-
Wendet Transparenz an.
0%
macht das Bild komplett transparent und100%
belässt das Bild unverändert.cssfilter: opacity(50%);
saturate()
-
Sättigt das Bild, wobei
0%
vollkommen ungesättigt ist,100%
das Bild unverändert lässt und Werte über100%
die Sättigung erhöhen.cssfilter: saturate(200%);
sepia()
-
Konvertiert das Bild in Sepia, wobei ein Wert von
100%
das Bild komplett in Sepia umwandelt und0%
keine Änderung bewirkt.cssfilter: sepia(100%);
Funktionen kombinieren
Sie können beliebig viele Funktionen kombinieren, um die Darstellung zu manipulieren. Die Filter werden in der angegebenen Reihenfolge angewendet. Das folgende Beispiel verbessert den Kontrast und die Helligkeit des Bildes:
filter: contrast(175%) brightness(103%);
Interpolation
Wenn animiert, und sowohl die Anfangs- als auch die Endfilterlisten die gleiche Länge haben, ohne <url>
in der gleichen Reihenfolge, wird jede ihrer Filterfunktionen gemäß den spezifischen Regeln der Filterfunktion interpoliert.
Wenn die Listen unterschiedliche Längen haben, werden die fehlenden entsprechenden Filterfunktionen der längeren Liste am Ende der kürzeren Liste hinzugefügt. Die hinzugefügten Funktionen verwenden ihre initialen, keine Filteränderung erreichenden Werte. Alle aufgelisteten Filter werden dann gemäß den spezifischen Regeln der Filterfunktion interpoliert. Andernfalls wird diskrete Interpolation verwendet.
Formale Definition
Initialer Wert | 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
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
Filterfunktionen anwenden
Die filter
-Eigenschaft wird auf das zweite Bild angewendet, wobei sowohl das Bild als auch sein Rahmen ausgegraut und unscharf gemacht 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 wiederholen
Filterfunktionen werden in der Reihenfolge des Erscheinens angewendet. Dieselbe 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);
}
Die Filter werden in der angegebenen Reihenfolge angewendet. Deshalb haben die Schlagschatten nicht die gleiche Farbe: Der Farbton des ersten Schattens wird durch die hue-rotate()
-Funktion verändert, der zweite jedoch nicht.
Spezifikationen
Specification |
---|
Filter Effects Module Level 1 # FilterProperty |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- CSS
backdrop-filter
-Eigenschaft - CSS Verrechnungen und Überblendungen-Modul, einschließlich der CSS
background-blend-mode
- undmix-blend-mode
-Eigenschaften. - Die CSS
mask
-Eigenschaft - SVG, einschließlich des SVG
<filter>
-Elements und des SVGfilter
-Attributs. - Anwendung von SVG-Effekten auf HTML-Inhalte