CSS3-Filter (Filter) Eigenschaften
Beispiele
Bearbeiten Sie alle Farben in Schwarz-Weiß-Bilder (100% grau):
-webkit-Filter: Graustufen (100% ); / * Chrome, Safari, Opera * /
Filter: Graustufen (100%);
}
Versuchen »
Definitionen und Verwendung
Filter-Attribut definiert die Elemente (in der Regel <img>) visuelle Effekte (zum Beispiel: Fuzzy und Sättigung).
| Standard: | keiner |
|---|---|
| Vererbung: | keine |
| Animationsunterstützung: | Ja. Einzelheiten finden Sie in CSS - Animation |
| Version: | CSS3 |
| JavaScript-Syntax: | Objekt .style.WebkitFilter = "Graustufen (100%)" , um zu versuchen >> |
Browser-Unterstützung
Die Zahlen in der Tabelle stellen die erste Browser die Methode Versionsnummer zu unterstützen.
Unmittelbar nach der Zahl für das Präfix -webkit- angegebenen Browser.
| Immobilien | |||||
|---|---|---|---|---|---|
| Filter | 18,0 -webkit- | Nicht unterstützt | 35.0 | 6.0 -webkit- | 15,0 -webkit- |
Hinweis: Ältere Browser Internet Explorer (4,0 bis 8,0) Nicht-Standard "Filter" zu unterstützen Eigentum aufgegeben wurde. IE8 und frühere Browser verwenden oft Opazität Eigenschaft.
CSS-Syntax
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
Tipp: Benutzen Sie Leerzeichen um mehrere Filter zu trennen.
Filterfunktion
Hinweis: Filter typischerweise Prozentsatz (zB: 75%), natürlich können auch verwendet werden , um eine Dezimalzahl darzustellen (zB: 0,75).
| Filter | Beschreibung |
|---|---|
| keiner | Der Standardwert, keine Wirkung. |
| blur (px) | Gaußsche Unschärfe auf die Bildeinstellungen. "Radius", um einen Wert Standard Gauß-Funktion schlecht ist, oder die Anzahl der Pixel auf dem Bildschirm zusammen zu schmelzen, so dass je größer der Wert, desto verschwommener; Wenn der Wert nicht gesetzt ist, ist der Standardwert 0; dieser Parameter CSS-Längenwert eingestellt werden kann, aber nicht Prozentwerte akzeptieren. |
| Helligkeit (%) | Die Anwendung einer linearen Multiplikation auf das Bild, um es heller oder dunkler aussehen. Wenn der Wert 0% ist, ist das Bild ganz schwarz. Wert 100% beträgt, keine Änderung im Bild. Andere Werte entsprechen Multiplikatoreffekt linear. Wert von mehr als 100% möglich sind, wird das Bild heller als das Original. Wenn der Wert nicht gesetzt ist, ist der Standardwert 1. |
| Kontrast (%) | Stellen Sie den Kontrast des Bildes. Wert 0% ist, das Bild ganz schwarz ist. Wert ist 100%, das Bild unverändert. Die Werte können 100% nicht überschreiten, was bedeutet einen geringeren Kontrast verwenden. Wenn der Wert nicht gesetzt ist, ist der Standardwert 1. |
| Drop-Schatten (h-Schatten v -shadow Unschärfe Ausbreitung Farbe) | Stellen Sie einen Schatteneffekt auf das Bild nach oben. Schatten werden unten im Bild synthetisiert, kann es eindeutig sein, eine bestimmte Farbe ist das Diagramm Maske Offset-Version zeichnen. Funktion akzeptiert <Schatten> Wert (im CSS3 Hintergrund definiert) geben, zusätzlich zu den "Einsatz" Schlüsselwort ist nicht erlaubt. Die Funktion mit dem bestehenden box-shadow box-shadow Eigenschaft ist sehr ähnlich, außer dass, durch den Filter, einige Browser für eine bessere Leistung Hardware-Beschleunigung zur Verfügung stellt.
|
| Graustufen (%) | Konvertieren Sie das Bild in Graustufen. Es definiert den Wert des Umtauschverhältnisses. Wert von 100% vollständig in ein Graustufenbild umgewandelt wird ein Wert von 0% des Bildes unverändert. Werte zwischen 0% und 100% ist der Multiplikatoreffekt linear. Wenn nicht gesetzt, ist der Standardwert 0; |
| Farbton-Rotation (deg) | Anwendung auf die Bild hue Rotation. "Winkel" Farbring Winkel-Bild ist ein Sollwert eingestellt Wert. Wert 0deg, das Bild ändern. Wenn der Wert nicht gesetzt ist, ist der Standardwert 0deg. Obwohl es keinen Maximalwert, der den Wert des Äquivalents eines anderen Umfangs 360 Grad übersteigt. |
| invertieren (%) | Invertierung Eingangsbild. Es definiert den Wert des Umtauschverhältnisses. 100% des Wertes wird vollständig umgekehrt. Ein Wert von 0% wird das Bild unverändert. Ein Wert zwischen 0% und 100% ist der Multiplikatoreffekt linear. Wenn der Wert nicht gesetzt ist, ist der Standardwert 0. |
| Opazität (%) | Conversion Maß an Transparenz des Bildes. Es definiert den Wert des Umtauschverhältnisses. 0% ist vollkommen transparent, und ein Wert von 100%, das Bild unverändert. Ein Wert zwischen 0% und 100%, ist der Effekt linear Multiplizierer, durch die Anzahl der Proben, multipliziert auch dem Bild entspricht. Wenn der Wert nicht gesetzt ist, ist der Standardwert 1. Diese Funktion ist sehr ähnlich wie die vorhandenen Opazität Eigenschaft der Ausnahme, dass durch das Filter, um die Leistung von einigen Browsern zu verbessern Hardwarebeschleunigung bereitzustellen. |
| Sättigung (%) | Wandelt die Bildsättigung. Es definiert den Wert des Umtauschverhältnisses. 0% vollständig ungesättigten, keine Veränderung des Bildes ist 100%. Andere Wert, der Multiplikatoreffekt ist linear. Mehr als 100% des Wertes zulässig ist, gibt es eine höhere Sättigung. Wenn der Wert nicht gesetzt ist, ist der Standardwert 1. |
| Sepia (%) | Wandeln Sie das Bild in Sepia. Es definiert den Wert des Umtauschverhältnisses. Wert von 100% ist ganz dunkelbraun, 0% des Bildes unverändert. Werte zwischen 0% und 100% ist der Multiplikatoreffekt linear. Wenn nicht gesetzt, ist der Standardwert 0; |
| url () | URL-Funktion nimmt eine XML-Datei, die eine SVG-Filter setzt, und kann einen Anker umfassen ein bestimmtes Filterelement zu spezifizieren. Zum Beispiel: filter: url(svg-url#element-id) |
| Initiale | Das Eigentum ist auf Standardwerte gesetzt, beziehen sich auf: die CSS Initial Keyword |
| erben | Diese Eigenschaft wird vom Eltern - Element geerbt, können Sie sehen: die CSS das Vererben Schlüsselwort |
Weitere Beispiele
Fuzzy Beispiele
Fotos Gaußsche Unschärfe:
-webkit-Filter: blur (5px) ; / * Chrome, Safari, Opera * /
Filter: blur (5px);
}
Versuchen »
Helligkeit Funktionsinstanz
Machen Sie das Bild heller:
-webkit-Filter: Helligkeit (200% ); / * Chrome, Safari, Opera * /
Filter: Helligkeit (200%);
}
Versuchen »
Kontrastfunktion Instanz
Stellen Sie den Kontrast des Bildes:
-webkit-Filter: Kontrast (200% ); / * Chrome, Safari, Opera * /
Filter: Kontrast (200%);
}
Versuchen »
Drop-Schatten-Funktion Beispiele
Stellen Sie einen Schatteneffekt auf das Bild nach oben:
-webkit-Filter: Drop-Schatten ( 8px 8px 10px rot); / * Chrome, Safari, Opera * /
Filter: Schlagschatten (8px 8px 10px rot);
}
Versuchen »
Graustufen Funktionsinstanz
Wandeln Sie das Bild in Graustufen:
-webkit-Filter: Graustufen (50% ); / * Chrome, Safari, Opera * /
Filter: Graustufen (50%);
}
Versuchen »
() Funktion Beispiele Farbton drehen
Anwendungen Farbtondrehung auf dem Bild:
-webkit-Filter: Farbton-Rotation ( 90 Grad); / * Chrome, Safari, Opera * /
Filter: Farbton-Rotation (90 Grad) ;
}
Versuchen »
Invert Funktionsinstanz
Invertierung Eingangsbild:
-webkit-Filter: Invertzucker (100% ); / * Chrome, Safari, Opera * /
Filter: Invertzucker (100%);
}
Versuchen »
Opazitätsfunktion Instanz
Conversion Maß an Transparenz des Bildes:
-webkit-Filter: Opazität (30% ); / * Chrome, Safari, Opera * /
Filter: Opazität (30%);
}
Versuchen »
Sättigen Funktionsinstanz
Konvertieren des Bildes Sättigung:
-webkit-Filter: sättigen (800% ); / * Chrome, Safari, Opera * /
Filter: sättigen (800%);
}
Versuchen »
Sepia Funktionsinstanz
Umwandeln von Bildern in Sepia:
-webkit-Filter: Sepia (100% ); / * Chrome, Safari, Opera * /
Filter: Sepia (100%);
}
Versuchen »
Composite-Funktion
Die Verwendung von mehreren Filtern, wobei jeder Filter durch Leerzeichen getrennt.
Hinweis: Die Reihenfolge ist sehr wichtig (zB Graustufen () verwenden , bevor Sie Sepia () wird eine komplette Graustufenbild erzeugen).
-webkit-Filter: Kontrast (200% ) Helligkeit (150%); / * Chrome, Safari, Opera * /
Filter: Kontrast (200%) Helligkeit (150%);
}
Versuchen »
Alle Filter Beispiele
Das folgende Beispiel zeigt, wie all die Filter zu verwenden:
-webkit-Filter: blur (4px) ;
Filter: blur (4px);
}
.Brightness {
-webkit-Filter: Helligkeit (0,30) ;
Filter: Helligkeit (0,30);
}
.contrast {
-webkit-Filter: Kontrast (180% );
Filter: Kontrast (180%);
}
.grayscale {
-webkit-Filter: Graustufen (100% );
Filter: Graustufen (100%);
}
.huerotate {
-webkit-Filter: Farbton drehen ( 180 °);
Filter: Farbton drehen (180 °) ;
}
.invert {
-webkit-Filter: Invertzucker (100% );
Filter: Invertzucker (100%);
}
.opacity {
-webkit-Filter: Opazität (50% );
Filter: Opazität (50%);
}
.saturate {
-webkit-Filter: sättigen (7) ;
Filter: sättigen (7);
}
.sepia {
-webkit-Filter: Sepia (100% );
Filter: Sepia (100%);
}
.shadow {
-webkit-Filter: Drop-Schatten ( 8px 8px 10px grün);
Filter: Schlagschatten (8px 8px 10px grün);
}
Versuchen »
In Verbindung stehende Artikel
HTML - DOM Referenz: Style - Attribute für den Filter