Beispiel
Ändern Sie die Farbe eines Bildes auf Schwarz und Weiß (100% grayscale) :
// Standard syntax
document.getElementById("myImg").style.filter
= "grayscale(100%)";
// Code for Chrome, Safari and Opera
document.getElementById("myImg").style.WebkitFilter = "grayscale(100%)";
Versuch es selber " Definition und Verwendung
Die Filtereigenschaft fügt visuelle Effekte (like blur and saturation) zu Bildern.
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 | 6.0 Webkit | 15,0 Webkit |
Hinweis: Chrome, Safari und Opera eine Alternative unterstützen, die WebkitFilter Eigenschaft.
Syntax
Bringen Sie die Filtereigenschaft:
object .style.filterStellen Sie die Filtereigenschaft:
object .style.filter="none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate()
| invert() | opacity() | saturate() | sepia()"
Filterfunktionen
Anmerkung: Die Filter , die Prozentwerte verwenden (ie 75%) , übernimmt auch den Wert als Dezimalzahl (ie 0.75) .
| Filter | Beschreibung |
|---|---|
| keiner | Gibt keine Auswirkungen |
| 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. |
| brightness( % ) | Zum Einstellen der Helligkeit des Bildes. 0% wird das Bild komplett schwarz machen. 100% (1) ist Ausfall- und repräsentiert das Originalbild. Werte über 100% werden helle Ergebnisse liefern. |
| contrast( % ) | Stellt den Kontrast des Bildes. 0% wird das Bild komplett schwarz machen. 100% (1) ist Ausfall- und repräsentiert das Originalbild. Werte über 100% werden die Ergebnisse mit weniger Kontrast. |
| Drop- shadow( h-shadow v-shadow blur spread color ) | Wendet einen Schlagschatten-Effekt auf das Bild. Mögliche Werte: h-shadow - Erforderlich. Gibt einen Pixelwert für die horizontalen Schatten. Negative Werte legen den Schatten auf der linken Seite des Bildes. v-shadow - Erforderlich. Gibt einen Pixelwert für die vertikalen Schatten. Negative Werte stellen den Schatten über dem Bild. verschwimmen - Optional. Dies ist der dritte Wert ist, und in Pixel sein muss. 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). spread - Optional. Dies ist der vierte Wert, und in Pixel sein muss. Positive Werte bewirken, dass der Schatten erweitern und wächst größer, und negative Werte bewirkt, dass der Schatten schrumpfen. Wenn nicht angegeben, wird es 0 (the shadow will be the same size as the element) . Hinweis: Chrome, Safari und Opera, und vielleicht anderer Browser unterstützt 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) . Tipp: Dieser Filter ist ähnlich die box-shadow Eigenschaft. |
| grayscale( % ) | Wandelt das Bild in Graustufen. 0% (0) ist Ausfall- und repräsentiert das Originalbild. 100% wird das Bild vollständig grau machen (used for black and white images) . Hinweis: Negative Werte sind nicht erlaubt. |
| Hue - rotate( deg ) | Wendet eine Farbtondrehung auf das Bild. Der Wert legt die Anzahl der Grade um den Farbkreis der Bildprüfstücke angepasst. 0deg ist Standard und stellt das Originalbild. Hinweis: Maximalwert ist 360 Grad. |
| invert( % ) | Kehrt die Proben im Bild. 0% (0) ist Ausfall- und repräsentiert das Originalbild. 100% wird das Bild vollständig invertiert machen. Hinweis: Negative Werte sind nicht erlaubt. |
| opacity( % ) | Legt die Opazität Ebene für das Bild. Die Opazität-Ebene beschreibt die Transparenz-Ebene, wobei gilt: 0% ist vollständig transparent. 100% (1) ist Ausfall- und repräsentiert das Originalbild (no transparency) . Hinweis: Negative Werte sind nicht erlaubt. Tipp: Dieser Filter ist ähnlich Opazität Eigenschaft. |
| saturate( % ) | Sättigt das Bild. 0% (0) wird das Bild vollständig un-gesättigte machen. 100% ist Standard und stellt das Originalbild. Werte über 100% bietet übersättigtem Ergebnisse. Hinweis: Negative Werte sind nicht erlaubt. |
| sepia( % ) | Wandelt das Bild in Sepia. 0% (0) ist Ausfall- und repräsentiert das Originalbild. 100% wird das Bild vollständig Sepia machen. Hinweis: Negative Werte sind nicht erlaubt. |
Technische Details
| CSS Version | CSS3 |
|---|
Verwandte Seiten
CSS - Referenz: filter property
<Style - Objekt