Beispiel
Ändern Sie die Farbe aller Bilder in Schwarz-Weiß (100% gray) :
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari,
Opera */
filter: grayscale(100%);
}
Original image
grayscale(100%)
Tipp: Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.
Definition und Verwendung
Die Filter - Eigenschaft definiert visuelle Effekte (like blur and saturation) zu einem Element (often <img>) .
| Standardwert: | keiner |
|---|---|
| Vererbt: | no |
| Anima: | yes. Read about animatable |
| Version: | CSS3 |
| JavaScript-Syntax: | object .style.WebkitFilter="grayscale(100%)" Try it |
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
Zahlen, gefolgt von -webkit- geben Sie die erste Version, die mit einem Präfix gearbeitet.
| Eigentum | |||||
|---|---|---|---|---|---|
| filter | 18,0 -webkit- | 13.0 | 35.0 | 9.1 6.0 -webkit- | 15,0 -webkit- |
Hinweis: Ältere Versionen von Internet Explorer (4.0 to 8.0) unterstützt einen Nicht-Standard "filter" Eigenschaft , die veraltet ist. Dies wurde vor allem für verwendet Opazität , wenn Unterstützung von IE8 und unten erforderlich.
CSS-Syntax
filter:
none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate()
| invert() | opacity() | saturate() | sepia() | url();Tipp: Um mehrere Filter zu verwenden, trennen Sie die einzelnen Filter mit einem Raum (See "More Examples" below) weiter (See "More Examples" below) .
Filterfunktionen
Hinweis: Die Filter , die Prozentwerte verwenden (ie 75%) , nehmen auch den Wert als Dezimalzahl (ie 0.75) .
| Filter | Beschreibung | Spiel es |
|---|---|---|
| none | Standardwert. Gibt keine Auswirkungen | Spiel es " |
| blur( px ) | Wendet einen Unschärfe-Effekt auf das Bild. Ein größerer Wert wird mehr Unschärfe erstellen. Wenn kein Wert angegeben wird, wird 0 verwendet. | Spiel es " |
| brightness( % ) | Zum Einstellen der Helligkeit des Bildes. 0% wird das Bild komplett schwarz zu machen. 100% (1) ist Standard und stellt das Originalbild. Werte über 100% werden heller Ergebnisse liefern. | Spiel es " |
| contrast( % ) | Stellt den Kontrast des Bildes. 0% wird das Bild komplett schwarz zu machen. 100% (1) ist Standard und stellt das Originalbild. Werte über 100% werden die Ergebnisse mit weniger Kontrast. | Spiel es " |
| drop-shadow( h-shadow v-shadow blur spread color ) | Gilt ein Schlagschatten-Effekt auf das Bild. Mögliche Werte: h-Schatten - Erforderlich. Gibt einen Pixelwert für den horizontalen Schatten. Negative Werte legen den Schatten auf der linken Seite des Bildes. v-Schatten - Erforderlich. Gibt einen Pixelwert für die vertikale Schatten. Negative Werte stellen den Schatten über dem Bild. Blur - Optional. Dies ist der dritte Wert ist, und in Pixel sein müssen. Fügt einen Unschärfe-Effekt auf den Schatten. Ein größerer Wert wird mehr Unschärfe schaffen (der Schatten wird größer und leichter). Negative Werte sind nicht erlaubt. Wenn kein Wert angegeben wird, wird 0 verwendet (der Schatten der Kante ist scharf). Verbreitung - Optional. Dies ist der vierte Wert, und in Pixel sein müssen. Positive Werte bewirken die Schatten zu erweitern und wachsen größer, und negative Werte bewirken die Schatten zu schrumpfen. Wenn nicht angegeben, es wird 0 (the shadow will be the same size as the element) . Hinweis: Chrome, Safari und Opera, und vielleicht andere Browser unterstützen diese vierte Länge; es wird nicht, wenn hinzugefügt machen. Farbe - Optional. Fügt eine Farbe in den Schatten. Wenn nicht anders angegeben, hängt die Farbe auf dem Browser (often black) . Ein Beispiel für einen roten Schatten zu schaffen, die sowohl horizontal als 8px groß ist und vertikal mit einer Unschärfe-Effekt von 10px: Filter: Schlagschatten (8px 8px 10px rot); Tipp: Dieser Filter ist ähnlich wie die box-shadow Eigenschaft. | Spiel es " |
| grayscale( % ) | Wandelt das Bild in Graustufen. 0% (0) ist Standard und stellt das Originalbild. 100% wird das Bild vollständig grau machen (used for black and white images) - (used for black and white images) . Hinweis: Negative Werte sind nicht erlaubt. | Spiel es " |
| hue-rotate( deg ) | Wendet einen Farbton Drehung auf das Bild. Der Wert legt die Anzahl der Grad um den Farbkreis die Bildproben angepasst. 0deg ist Standard und stellt das Originalbild. Hinweis: Maximalwert ist 360 Grad. | Spiel es " |
| invert( % ) | Kehrt die Proben im Bild. 0% (0) ist Standard und stellt das Originalbild. 100% wird das Bild vollständig invertiert machen. Hinweis: Negative Werte sind nicht erlaubt. | Spiel es " |
| opacity( % ) | Stellt die Opazität Ebene für das Bild. Die Opazität-Ebene beschreibt die Transparenz-Ebene, wobei gilt: 0% ist komplett transparent. 100% (1) ist Standard und stellt das Originalbild (no transparency) . Hinweis: Negative Werte sind nicht erlaubt. Tipp: Dieser Filter ist ähnlich wie die Opazität Eigenschaft. | Spiel es " |
| saturate( % ) | Sättigt das Bild. 0% (0) wird das Bild vollständig un-gesättigten machen. 100% ist Standard und stellt das Originalbild. Werte über 100% bietet super-gesättigte Ergebnisse. Hinweis: Negative Werte sind nicht erlaubt. | Spiel es " |
| sepia( % ) | Konvertiert das Bild in Sepia. 0% (0) ist Standard und stellt das Originalbild. 100% wird das Bild vollständig Sepia machen. Hinweis: Negative Werte sind nicht erlaubt. | Spiel es " |
| url() | Die url() Funktion nimmt den Speicherort einer XML - Datei , die ein SVG - Filter gibt, und kann einen Anker zu einem bestimmten Filterelement umfassen. Beispiel: Filter: url(svg-url#element-id) | |
| initial | Setzt diese Eigenschaft auf den Standardwert. Lesen Sie mehr über Anfangs | |
| inherit | Erbt diese Eigenschaft von seinem übergeordneten Element. Lesen Sie mehr über erben |
Mehr Beispiele
Blur Beispiel
Tragen Sie einen Unschärfe-Effekt auf dem Bild:
img {
-webkit-filter: blur(5px); /* Chrome, Safari,
Opera */
filter: blur(5px);
}
Original image
blur(5px)
Helligkeit Beispiel
Stellen Sie die Helligkeit des Bildes:
img {
-webkit-filter: brightness(200%); /* Chrome, Safari,
Opera */
filter: brightness(200%);
}
Original image
brightness(200%)
Kontrastbeispiel
Stellen Sie den Kontrast des Bildes:
img {
-webkit-filter: contrast(200%); /* Chrome, Safari,
Opera */
filter: contrast(200%);
}
Original image
contrast(200%)
Schlagschatten Beispiel
Tragen Sie einen Schlagschatten-Effekt auf dem Bild:
img {
-webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari,
Opera */
filter: drop-shadow(8px 8px 10px red);
}
Original image
drop-shadow(8px 8px 10px red)
Graustufen Beispiel
Wandeln Sie das Bild in Graustufen:
img {
-webkit-filter: grayscale(50%); /* Chrome, Safari,
Opera */
filter: grayscale(50%);
}
Original image
grayscale(50%)
Hue Rotation Beispiel
Tragen Sie eine Farbtondrehung auf dem Bild:
img {
-webkit-filter: hue-rotate(90deg); /* Chrome, Safari,
Opera */
filter: hue-rotate(90deg);
}
Original image
hue-rotate(90deg)
Invert Beispiel
Kehren Sie die Proben in das Bild:
img {
-webkit-filter: invert(100%); /* Chrome, Safari,
Opera */
filter: invert(100%);
}
Original image
invert(100%)
Opazität Beispiel
Stellen Sie die Deckkraft für das Bild:
img {
-webkit-filter: opacity(30%); /* Chrome, Safari,
Opera */
filter: opacity(30%);
}
Original image
opacity(30%)
sättigen Beispiel
Tränken Sie das Bild:
img {
-webkit-filter: saturate(800%); /* Chrome, Safari,
Opera */
filter: saturate(800%);
}
Original image
saturate(800%)
Sepia Beispiel
Wandeln Sie das Bild in Sepia:
img {
-webkit-filter: sepia(100%); /* Chrome, Safari,
Opera */
filter: sepia(100%);
}
Original image
sepia(100%)
Die Kombination Filter / Mehrere Filter
Um mehrere Filter verwenden, trennen Sie die einzelnen Filter mit einem Leerzeichen.
Hinweis: Die Reihenfolge ist wichtig (ie using grayscale() von sepia() (ie using grayscale() nach sepia() in einem völlig Graubild führen wird).
img {
-webkit-filter: contrast(200%) brightness(150%); /* Chrome, Safari,
Opera */
filter: contrast(200%) brightness(150%);
}
Original image
contrast(200%) brightness(150%)
Alle Filter
Eine Demonstration aller Filterfunktionen:
.blur {
-webkit-filter: blur(4px);
filter: blur(4px);
}
.brightness {
-webkit-filter:
brightness(0.30);
filter: brightness(0.30);
}
.contrast {
-webkit-filter:
contrast(180%);
filter: contrast(180%);
}
.grayscale {
-webkit-filter:
grayscale(100%);
filter: grayscale(100%);
}
.huerotate {
-webkit-filter:
hue-rotate(180deg);
filter: hue-rotate(180deg);
}
.invert {
-webkit-filter:
invert(100%);
filter: invert(100%);
}
.opacity {
-webkit-filter:
opacity(50%);
filter: opacity(50%);
}
.saturate {
-webkit-filter:
saturate(7);
filter: saturate(7);
}
.sepia {
-webkit-filter:
sepia(100%);
filter: sepia(100%);
}
.shadow {
-webkit-filter:
drop-shadow(8px 8px 10px green);
filter: drop-shadow(8px 8px 10px green);
} Versuch es selber " Verwandte Seiten
HTML - DOM - Referenz: filter property