Das CSS filter Eigenschaft sieht aus wie eine Styling-Verknüpfung: eine Zeile wird ein Foto schwarz-weiß, verwischt einen Hintergrund oder wärmt ein Miniaturbild, ohne Bildbearbeitungsprogramm beteiligt Es ist das Es ändert auch, wie der Browser das Element positioniert und schichtet, auf das es angewendet wird, weshalb ein für einen Hover-Effekt hinzugefügter Filter einen Dropdown leise drei Komponenten entfernt aufbrechen kann.
Diese Anleitung behandelt, was jede Filterfunktion mit Pixelwerten macht, warum dieselben Funktionen in einer anderen Reihenfolge ein anderes Bild erzeugen, wie sich Filter in Layout und Animation verhalten und wo sie Leistung kosten Es verwendet die kostenlose CSS-Filtergenerator Deklarationen zu erstellen, aber jedes Beispiel ist einfaches CSS, das Sie überall einfügen können.
tl; dr: Das CSS
filterEigenschaft wendet grafische Effekte wie Unschärfe, Helligkeit, Kontrast, Graustufen, Sepia, Sättigung, Invertierung, Farbtonrotation und Deckkraft auf ein Element und alles darin an, in der Reihenfolge, in der die Funktionen geschrieben werden Jeder Wert außernoneErstellt auch einen Stapelkontext und wird zum enthaltenden Block für feste und absolut positionierte Kinder, was die übliche Ursache für & quot; ist. Mein Modal steckt in einer Karte fest." Der Toolz CSS-Filtergenerator erstellt die Deklaration mit Schiebereglern und einer Live-Vorschau, schreibt nur die von Ihnen geänderten Funktionen und führt clientseitige, kostenlose und keine Anmeldung aus.
Was ist die CSS-Filter-Eigenschaft?
Die CSS-Filtereigenschaft wendet Bildverarbeitungseffekte auf ein Element an, bevor es auf die Seite gezeichnet wird Der Effekt deckt das Element ab's ganzes Rendering: seinen Hintergrund, Ränder, Text, Bilder und untergeordnete Elemente Es ist im W3 C definiert Filtereffektmodul Level 1 und in allen aktuellen Browsern unterstützt; die MDN-Referenz für Filter Kompatibilitätsdetails auflistet.
Eine Deklaration ist eine durch Leerzeichen getrennte Liste von Filterfunktionen:
img.hero {
filter: brightness(105%) contrast(110%) saturate(130%) sepia(45%);
}
Die Funktionen laufen von links nach rechts Jede nimmt die Ausgabe der vorherigen als Eingabe, was der Schlüssel zum Verständnis ist, warum Ordnung wichtig ist.
Filter verändern die Bilddatei nicht Der Browser wendet sie jedes Mal an, wenn er malt, sodass das Original unberührt bleibt und Sie den Effekt mit einer Zeile CSS ändern oder entfernen können.
Was macht jede Filterfunktion?
Jede Funktion hat einen Identitätswert, der das Element unverändert lässt Der Toolz-Generator verwendet diesen, um die Ausgabe kurz zu halten: Jede Funktion, die bei ihrem Identitätswert übrig bleibt, wird im CSS weggelassen.
| Funktion | Was es tut | Identität | Generatorschieberbereich |
|---|---|---|---|
blur() |
Gaußsche Unschärfe mit dem gegebenen Radius | 0px |
0 bis 20 x |
brightness() |
Multipliziert jeden Farbkanal | 100% |
0 bis 200% |
contrast() |
Schiebt Kanäle weg von oder in Richtung Mittelgrau | 100% |
0 bis 200% |
saturate() |
Erhöht oder verringert die Farbintensität | 100% |
0 bis 200% |
grayscale() |
Vermengt sich zu einem Grau gleicher Leuchtdichte | 0% |
0 bis 100% |
sepia() |
Verläuft zu einem warmen Braunton | 0% |
0 bis 100% |
invert() |
Bringt jeden Kanal in Richtung seines Gegenteils | 0% |
0 bis 100% |
hue-rotate() |
Dreht Farben um das Farbrad | 0deg |
0 bis 360 Grad |
opacity() |
Macht das Element transparenter | 100% |
0 bis 100% |
Die Spezifikation erlaubt Werte über einige dieser Bereiche hinaus, wie z brightness(300%). Die Schieberegler decken die Bereiche ab, die für Anpassungen im Fotostil nützlich sind; Sie können einen größeren Wert von Hand in Ihr CSS eingeben.
Die Spezifikation definiert auch drop-shadow(), die der Generator nicht umfasst Anders als box-shadow, drop-shadow() Folgt der sichtbaren Form transparenter Bilder wie PNG-Symbole, anstatt der rechteckigen Box element' s. Für rechteckige Schatten ist die Kastenschattenführer Flexiblere Eigenschaft abdeckt.
Wie verändern die Farbfilter Pixelwerte?
Die meisten Farbfilter sind einfache Arithmetik auf den roten, grünen und blauen Kanälen, die jeweils als Zahl von 0 bis 1 behandelt werden. Die Spezifikation Filter Effects definiert jede einzelne als Formel oder eine 3 x 3-Matrix. Durch die Bearbeitung einiger Farben werden sie vorhersehbar.
Helligkeit (150%) Multipliziert jeden Kanal mit 1,5. Aus einem Mittelgrau von rgb (100, 100, 100) wird rgb (150, 150, 150).Werte, die über 255 hinausgehen würden, werden abgeschnitten, weshalb hohe Helligkeiten Highlights in reines Weiß auswaschen.
Kontrast (200%) Für jeden Kanal gilt (Wert - 0,5) × 2 + 0,5. Aus einem dunklen Grau bei 0,25 (etwa 64) wird (0,25 - 0,5) × 2 + 0,5 = 0, schwarz Ein helles Grau bei 0,75 wird zu 1,0, weiß. Alles breitet sich von der Mitte weg aus.
Graustufen (100%) Ersetzt jedes Pixel durch ein Grau basierend auf der Leuchtdichte, wobei Gewichte von 0,2126 für Rot, 0,7152 für Grün und 0,0722 für Blau verwendet werden Reines Rot, rgb (255, 0, 0), wird zu 0,2126 × 255 = etwa 54, also rgb (54, 54, 54). Reines Grün wird zu einem viel helleren Grau von etwa 182. Deshalb behält eine Graustufenumwandlung den Eindruck, dass Grün heller als Rot ist.
Sepia (100%) Mischt Kanäle mit warmgewichteten Koeffizienten Für die rote Ausgabe lautet die Formel 0,393 R + 0,769 G + 0,189 B. Weiß geht als (1, 1, 1) ein und kommt als grob (1,35, 1,20, 0,94) heraus, das auf rgb (255, 255, 239) klemmt: Weiß wird zu einer schwachen Creme.
Diese Zahlen stammen aus der Anwendung der specification' s Formeln direkt Auf dem Bildschirm können Rundung und Farbmanagement ein Ergebnis um ein oder zwei Einheiten verschieben.
Warum verändert die Reihenfolge der Filterfunktionen das Ergebnis?
Filter werden der Reihe nach angewendet, so dass jede Funktion auf der vorherigen Funktion funktioniert' s Ausgabe Wenn eine Funktion Informationen entfernt, wie Graustufen entfernen Farbe, alles, was nach ihr läuft, hat weniger zu arbeiten mit.
Nehmen Sie reines Blau, RGB (0, 0, 255) und tragen Sie Graustufen und Sepia zu 100% in beiden Ordnungen auf.
filter: grayscale(100%) sepia(100%);
- Graustufen zuerst: Blau hat eine Leuchtdichte von 0,0722, sodass das Pixel auf jedem Kanal, etwa rgb (18, 18, 18), zu einem Dunkelgrau von 0,0722 wird.
- Sepia-Sekunde: Rot wird zu 0,0722 × (0,393 + 0,769 + 0,189) = 0,0975, Grün wird zu 0,0722 × 1,203 = 0,0869, Blau wird zu 0,0722 × 0,937 = 0,0677.
- Ergebnis: über Rgb (25, 22, 17)„ein sehr dunkles, warmes Braun.
filter: sepia(100%) grayscale(100%);
- Sepia zuerst: rot wird 0,189, grün 0,168, blau 0,131, ein dunkles Braun.
- Graustufensekunde: Die Leuchtdichte beträgt 0,2126 × 0,189 + 0,7152 × 0,168 + 0,0722 × 0,131 = 0,170.
- Ergebnis: über Rgb (43, 43, 43)„ein neutrales Grau ohne jegliche Tönung.
Gleiche zwei Funktionen, unterschiedliche Reihenfolge, und ein Ergebnis ist getönt, während das andere nicht ist Die allgemeine Regel: Geben Sie die Funktionen zum Entfernen von Farben zuerst ein, wenn Sie möchten, dass eine spätere Funktion das Ergebnis tönt, und zuletzt, wenn Sie ein neutrales Endbild wünschen.
Der Generator schreibt Funktionen immer in einer festen Reihenfolge: Unschärfe, Helligkeit, Kontrast, Sättigung, Graustufen, Sepia, Invertieren, Farbtonrotation, Opazität Graustufen stehen also immer vor Sepia, was die getönte Version ergibt, wenn man eine andere Reihenfolge braucht, kopieren Sie das CSS und ordnen Sie die Funktionen von Hand neu an.
Was produzieren die Presets?
Der Generator öffnet sich auf der Vintage-Voreinstellung Dies sind die genauen Deklarationen, die jede Voreinstellung schreibt:
| Voreingestellt | Generiertes CSS |
|---|---|
| keine | filter: none; |
| Graustufen | filter: grayscale(100%); |
| Jahrgang | filter: brightness(105%) contrast(110%) saturate(130%) sepia(45%); |
| Warm | filter: brightness(105%) saturate(140%) sepia(25%); |
| Cool | filter: saturate(120%) hue-rotate(200deg); |
| Dramatisch | filter: brightness(90%) contrast(150%) saturate(120%); |
| Verblichen | filter: brightness(110%) saturate(80%) opacity(80%); |
| Invertieren | filter: invert(100%); |
| Unschärfe | filter: blur(4px); |
Voreinstellungen sind Startpunkte Klicken Sie auf Warm, ziehen Sie dann Blur auf 2 px, und die Ausgabe wird filter: blur(2px) brightness(105%) saturate(140%) sepia(25%);. Klicken Sie auf Keine oder Zurücksetzen und es kehrt zurück zu filter: none;drohen
Die Cool-Voreinstellung ist stärker, als ihr Name vermuten lässt: Eine 200-Grad-Farbtonrotation bewegt Orangen in Richtung Blau und Blau in Richtung Orange. Sie lautet als & quot;cool" auf warmen Fotos und als starke Farbverschiebung auf allem anderen.
Die Vorschau ist ein festes Sample eines blauen, orange und grünen Farbverlaufs mit ein paar Formen, kein Upload, Sie zeigt, wie jede Funktion Farbe, Kontrast und Unschärfe bewegt, aber testen Sie immer das kopierte CSS auf Ihrem realen Bild, denn ein Filter, der einem Farbverlauf schmeichelt, kann auf einem Hautton schlammig aussehen.
Wie baut man mit dem Generator einen Filter?
- Öffne das Filter CSS Generator. Es beginnt bei Vintage.
- Wählen Sie eine Voreinstellung aus, die dem gewünschten Look am nächsten kommt, oder klicken Sie auf Keine, um von keinem Filter zu starten.
- Ziehen Sie die Schieberegler Die Vorschau aktualisiert sich während der Bewegung, und die Generated CSS-Zeile aktualisiert sich damit.
- Klicken Sie auf CSS kopieren, um das Ganze zu setzen
filter: ...;Deklaration in Ihrer Zwischenablage. - Fügen Sie es auf den Selektor für Ihr Bild oder Element ein und überprüfen Sie es dann auf der echten Seite.
In der Ausgabe erscheinen nur geänderte Funktionen, sodass das Zurückverschieben von Helligkeit auf genau 100% entfernt wird brightness() von der Leitung statt zu verlassen brightness(100%) Hinter.
Warum bricht ein Filter feste und absolut positionierte Elemente?
Denn jede filter Andere als none Macht das Element zu einem enthaltenden Block für seine absolut und fest positionierten Nachkommen, und erzeugt einen neuen Stapelkontext Die Spezifikation Filter Effects gibt beides an Dies ist kein Browser-Bug; so wird die Eigenschaft definiert.
In der Praxis entstehen dadurch zwei klassische Fehler.
Ein festes Modal, das nicht fest ist. Normalerweise position: fixed Stellt ein Element relativ zum Ansichtsport In ein gefiltertes Ahnen wird es stattdessen relativ zu diesem Ahnen platziert:
.card { filter: grayscale(100%); }
/* Meant to cover the whole screen, but now covers only .card */
.card .modal { position: fixed; inset: 0; }
Ein Dropdown, versteckt unter Nachbarn. Das gefilterte Element wird zu einem eigenen Stapelkontext, also ein Kind mit z-index: 1000 Außerhalb der Karte nicht mehr über Elemente steigen kann, ist nur noch oben innerhalb der Karte.
Die Fixes sind für beide gleich Wenden Sie den Filter auf ein schmaleres Element an, wie z.B. die img Innerhalb der Karte statt der Karte selbst Oder rendern Sie das Modal oder den Dropdown außerhalb des gefilterten Elements, was & quot; Portal" Komponenten in UI-Frameworks tun Die transform Eigenschaft bewirkt das gleiche Containing-Block-Verhalten, so dass die CSS-Transformationsführer Nützlich ist, wenn Sie diesen Fehler mit beiden Eigenschaften im Spiel.
Wie vergleichen sich Filter mit Hintergrundfilter und Deckkraft?
Mehrere Eigenschaften überschneiden sich mit Filterfunktionen, und die Wahl der richtigen vermeidet Nebenwirkungen.
| Eigentum | Betrifft | Typische Verwendung |
|---|---|---|
filter |
Das Element und sein Inhalt | Fotoeffekte, Graustufenlogos, Unschärfe auf einem Bild |
backdrop-filter |
Was auch immer hinter dem Element steckt | Frostglasscheiben, unscharfe Überlagerungen |
opacity |
Das Element und sein Inhalt | Einblenden eines Elements in oder aus |
filter: opacity() |
Das Element und sein Inhalt | Transparenz als Teil einer Filterkette |
mix-blend-mode |
Wie sich das Element mit dem verblendet, was dahinter steckt | Farbüberlagerungen, Duotoneffekte |
backdrop-filter dieselben Funktionen übernimmt wie filter, sondern wendet sie auf den Inhalt hinter dem Element an, wodurch Glasmorphieplatten die Seite darunter verwischen Die Glasmorphiengenerator Baut diese Erklärungen auf.
Zum Verblassen eines Elements von selbst, schlicht opacity ist die klarere Wahl. opacity() Innerhalb einer Filterkette ist nützlich, wenn Sie bereits einen Filter schreiben und Transparenz in derselben Zeile wünschen.
Kann man CSS-Filter animieren?
Ja. filter Animierbar ist, und ein übliches Muster ist ein Graustufenlogo, das sich im Schwebeflug in Farbe verwandelt:
.logo {
filter: grayscale(100%);
transition: filter 0.3s ease;
}
.logo:hover {
filter: none;
}
Der Browser interpoliert zwischen grayscale(100%) und none Weil none Wird als die Matching-Funktionen an ihren Identitätswerten behandelt Interpolation funktioniert sauber, wenn beide Zustände die gleichen Funktionen in der gleichen Reihenfolge auflisten, unterscheiden sich Start - und Endliste in der Reihenfolge, kann das Ergebnis springen, anstatt reibungslos zu animieren, also beide Zustände mit der gleichen Funktionsreihenfolge schreiben.
Schadet CSS-Filter der Leistung?
Filter kosten Renderzeit, und Unschärfe kostet am meisten Browser führen üblicherweise Filter auf der GPU aus, was die meisten Farbfilter billig macht. blur() Anders ist: Die Arbeit wächst sowohl mit dem Unschärferadius als auch mit der Größe des Bereichs, sodass ein großer Radius auf einem Vollbildelement, insbesondere einem, das Scrollinhalte animiert oder hinter diesen sitzt, Frames auf langsameren Geräten abwerfen kann.
Praktische Grenzen:
- Halten Sie die Unschärferadien bei großen Elementen klein und vermeiden Sie eine Animation des Radius selbst.
- Verwischen Sie ein kleineres Element oder ein verkleinertes Bild anstelle eines ganzseitigen Wrappers.
- Für Bewegung, animieren
transformundopacity, welche Browser effizient verarbeiten und den Filter statisch halten. - Testen Sie auf einem Mittelklasse-Telefon, nicht nur auf einem Desktop.
Häufige Fragen zu spezifischen Effekten
Ein paar Effekte kommen oft genug zum Aufschreiben.
Schwarz-Weiß-Bild: filter: grayscale(100%); Werte unter 100% hinterlassen etwas Farbe, also grayscale(50%) Gedämpften Blick gibt.
Gedimmtes Hintergrundbild hinter Text: filter: brightness(60%); Auf dem Bildelement Überprüfen Sie den Textkontrast im Nachhinein, anstatt zu raten; die Farbkontrastprüfung WCAG-Verhältnis ergibt.
Rauhdunkelmodus für ein eingebettetes Dokument oder Diagramm: filter: invert(100%) hue-rotate(180deg); Das Umdrehen von Hell-Dunkel-Flips, aber auch die Farbtöne werden zu ihren Gegensätzen; Durch Drehen des Farbtons um 180 Grad kehren die meisten Farben wieder zu ihrem ursprünglichen Farbton zurück. Es handelt sich um eine Annäherung, und die Fotos im Inneren sehen falsch aus, also schließen Sie sie aus.
Schwarz-weiß getönt: filter: grayscale(100%) sepia(60%); Wie oben durchgearbeitet.
Der vollständige Satz von CSS-Buildern, einschließlich Textschatten und Transformationen, ist auf dem Hub für CSS-Toolsdrohen
Ist der Generator privat?
Ja. Die Vorschau und das CSS werden in Ihrem Browser mit JavaScript generiert, es wird nichts hochgeladen, es gibt gar kein Bild zum Hochladen, und das Tool funktioniert offline weiter, sobald die Seite geladen wurde Das Kopieren des CSS zählt in Richtung einer täglichen Nutzungsgrenze und zeichnet nur auf, dass eine Kopie passiert ist.
