Das beste CSS3-Filter (Filter) Eigenschaften-Tutorial im Jahr 2024. In diesem Tutorial können Sie Definitionen und Verwendung,Browser-Unterstützung,CSS-Syntax,Filterfunktion,Weitere Beispiele,In Verbindung stehende Artikel, lernen
Bearbeiten Sie alle Farben in Schwarz-Weiß-Bilder (100% grau):
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 >> |
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.
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
Tipp: Benutzen Sie Leerzeichen um mehrere Filter zu trennen.
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 |
Fotos Gaußsche Unschärfe:
Machen Sie das Bild heller:
Stellen Sie den Kontrast des Bildes:
Stellen Sie einen Schatteneffekt auf das Bild nach oben:
Wandeln Sie das Bild in Graustufen:
Anwendungen Farbtondrehung auf dem Bild:
Invertierung Eingangsbild:
Conversion Maß an Transparenz des Bildes:
Konvertieren des Bildes Sättigung:
Umwandeln von Bildern in Sepia:
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).
Das folgende Beispiel zeigt, wie all die Filter zu verwenden:
HTML - DOM Referenz: Style - Attribute für den Filter