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 Rahmen anzupassen.
Mehrere Funktionen, wie blur()
und contrast()
, stehen zur Verfügung, um voreingestellte 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;
Bei Verwendung einer Funktion gilt Folgendes:
filter: <filter-function> [<filter-function>]* | none;
Sie können url()
verwenden, um ein SVG-Filterelement zu referenzieren. 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 für eine Funktion ungültig ist, ergibt die Funktion none
. Mit Ausnahme der genannten Fälle akzeptieren die Funktionen, die einen Wert mit Prozentzeichen (z.B. 34%
) annehmen, auch den Wert als Dezimalwert (z.B. 0.34
).
Wenn die Werte der filter
-Eigenschaft mehrere Funktionen enthalten, werden die Filter in der Reihenfolge angewendet.
blur()
-
Wendet einen Gaußschen Weichzeichner auf das Eingabebild an.
cssfilter: blur(5px);
brightness()
-
Wendet einen linearen Multiplikator auf das Eingabebild an, wodurch es mehr oder weniger hell erscheint. Die Werte sind lineare Multiplikatoren für den Effekt, wobei
0%
ein komplett schwarzes Bild erzeugt,100%
keinen Effekt 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 keinen Effekt, und Werte über100%
erhöhen den Kontrast.cssfilter: contrast(200%);
drop-shadow()
-
Wendet den Parameter
<shadow>
als Schlagschatten an, wobei die Konturen des Bildes gefolgt werden. Die Schattensyntax ist ähnlich wie<box-shadow>
(definiert im CSS backgrounds and borders module), mit der Ausnahme, dass dasinset
-Schlüsselwort und derspread
-Parameter nicht erlaubt sind. Wie bei allenfilter
-Eigenschaftswerten werden alle Filter nach demdrop-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%
lässt das Eingabebild unverändert. Werte zwischen0%
und100%
erzeugen lineare Multiplikatoren für den Effekt.cssfilter: grayscale(100%);
hue-rotate()
-
Wendet eine Farbtonrotation an. Der
<angle>
-Wert definiert die Anzahl der Grad um den Farbkreis, bei denen die Eingabeproben angepasst werden. Ein Wert von0deg
lässt die Eingabe unverändert.cssfilter: hue-rotate(90deg);
invert()
-
Kehrt die Proben im Eingabebild um. Ein Wert von
100%
invertiert das Bild vollständig. Ein Wert von0%
lässt die Eingabe unverändert. Werte zwischen0%
und100%
haben lineare Multiplikatoren für den Effekt.cssfilter: invert(100%);
opacity()
-
Wendet Transparenz an.
0%
macht das Bild komplett transparent und100%
lässt das Bild unverändert.cssfilter: opacity(50%);
saturate()
-
Sättigt das Bild, wobei
0%
komplett entsä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 und0%
keine Änderung vornimmt.cssfilter: sepia(100%);
Kombinieren von Funktionen
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 Endfilter eine Funktionsliste gleicher Länge ohne <url>
in derselben Reihenfolge haben, wird jede ihrer Filterfunktionen entsprechend den spezifischen Regeln der Filterfunktion interpoliert.
Wenn die Filterlisten unterschiedlich lang sind, werden die fehlenden entsprechenden Filterfunktionen aus der längeren Liste dem Ende der kürzeren Liste hinzugefügt. Die hinzugefügten Funktionen verwenden ihre anfänglichen, ohne Filtermodifikation Werte. Alle aufgeführten Filter werden dann entsprechend den spezifischen Regeln der Filterfunktion interpoliert. Andernfalls wird diskrete Interpolation verwendet.
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
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
Anwenden von Filterfunktionen
Die filter
-Eigenschaft wird auf das zweite Bild angewendet, wodurch sowohl das Bild als auch der Rahmen verblasst und unscharf wird.
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" />
Wiederholte Filterfunktionen
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 angegebene Reihenfolge angewendet. Dies ist der Grund, warum die Schlagschatten nicht die gleiche Farbe haben: der Farbton des ersten Schlagschattens 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
backdrop-filter
mask
- SVG
filter
Attribut - CSS Compositing und Blending Modul, einschließlich der CSS
background-blend-mode
undmix-blend-mode
Eigenschaften. - SVG, einschließlich des SVG
<filter>
Elements und des SVGfilter
Attributs. - Anwenden von SVG-Effekten auf HTML-Inhalt