CSS -Filter: Eine umfassende Anleitung zur Bildmanipulation

CSS-Filter, zun?chst Teil der SVG-Spezifikation, bieten eine leistungsstarke und benutzerfreundliche M?glichkeit, das Bildwiedergabe zu manipulieren. Diese in CSS integrierten Filter erm?glichen Unsch?rfe, Aufhellen, S?ttigungsanpassungen und vieles mehr. Sie k?nnen einzeln oder in Kombination verwendet werden und bieten vielseitige visuelle Effekte. Die grundlegende Syntax ist einfach:

filter: <filter-function> [<filter-function>]* | none;

Lassen Sie uns die Schlüsselfilter untersuchen:

Schlüsselkonzepte:

• CSS -Filter modifizieren das Element -Rendering vor Anzeige und liefert eine effiziente Bildmanipulation. Sie haben einen breiten Browserunterstützung und erleichtern verschiedene Effekte (Unsch?rfe, Helligkeit, Kontrast, Drop-Shadow, Graustufen, Hue-Rotat, Invert, Deckkraft, S?ttigung, Sepia).
• Filter k?nnen für dynamische Grafiken kombiniert und animiert werden. Die Antragsreihenfolge beeinflusst das Endergebnis, wobei einige Filter m?glicherweise andere überschreiben. Sie gelten für verschiedene Elemente, einschlie?lich Bilder, Videos und IFrames.
• W?hrend im Allgemeinen auftretend, kann der blur -Filter ohne Hardware -Beschleunigung langsamer sein. url() Filterleistung h?ngt vom angewendeten SVG -Filter ab. Hauptbrowser unterstützen die Eigenschaft filter, aber Internet Explorer ist eine Ausnahme.

einzelne Filterfunktionen:

• Helligkeit: steuert die Bildhelligkeit. Akzeptiert Werte ≥ 0; 0% ist schwarz, 100% ist das Original und Werte & gt; 100% erh?hen Helligkeit. filter: brightness(300%);

• Kontrast: Passt Bildkontrast an. Werte ≥ 0; 0% führt zu einem Graustufenbild, 100% sind das ursprüngliche und h?here Werte erh?hen den Kontrast. filter: contrast(0%);

• Graustufen: Umwandelt Bilder in Graustufen. Die Werte reichen von 0% (kein Effekt) bis 100% (vollst?ndig Graustufen). filter: grayscale(100%);

• S?ttigung: steuert die Farbs?ttigung. 0% entfernt alle Farbe, 100% ist das Original und Werte & GT; 100% übers?ttigt. filter: saturate(0%);

• sepia: wendet einen Sepia -Ton an. 0% ist das Original, 100% ist vollst?ndig Sepia. filter: sepia(100%);

• Hue-Rotat: dreht Bildfarben. 0deg ist unver?ndert; Werte & gt; 360 Grad umwickeln. filter: hue-rotate(90deg);

• Invert: Invertiert Bildfarben. 0% haben keinen Einfluss, 100% vollst?ndig invertiert. filter: invert(100%);

• Blur: wendet eine Gau?sche Unsch?rfe an. Der Radius (in Pixeln) bestimmt die Unsch?rfenintensit?t. filter: blur(1px);

• Opazit?t: steuert die Transparenz. 0% sind voll transparent, 100% undurchsichtig. filter: opacity(75%);

• Drop-Shadow: fügt einen Drop-Schatten hinzu. Ben?tigt X- und Y -Offsets, Farbe und optional einen Unsch?rfenradius. filter: drop-shadow(5px 5px 10px #666);

• url (): Erm?glicht die Verwendung benutzerdefinierter SVG -Filter. Verweist auf die ID des SVG -Filters. Die Leistung variiert basierend auf dem SVG -Filter.

kombinieren und animieren Filter:

Mehrere Filter k?nnen kombiniert werden; Auftragsangelegenheiten, da einige Filter andere au?er Kraft setzen. Animation erstellt dynamische Effekte mit CSS -überg?ngen oder Animationen.

Zus?tzliche Hinweise:

Filter betreffen alle Teile des Elements (Hintergrund, Grenzen, Text). Sie k?nnen auf Videos und Iframes angewendet werden. Die Leistung ist im Allgemeinen gut, mit Ausnahme von blur (ohne Hardwarebeschleunigung) und url() (abh?ngig vom SVG -Filter). Die Browser -Unterstützung ist ausgezeichnet, ohne den Internet Explorer.

h?ufig gestellte Fragen:

Dieser Abschnitt würde Antworten auf die im Originaltext bereitgestellten FAQs enthalten, die für Klarheit und SUKTIVELAUSTION angegeben sind. Aus Platzbeschr?nkungen werde ich sie hier weglassen, aber sie w?ren eine wertvolle Erg?nzung zum endgültigen polierten Artikel.

Das obige ist der detaillierte Inhalt vonCSS -Filtereffekte: Unsch?rfe, Graustufen, Helligkeit und mehr in CSS!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!