suchen
HeimWeb-FrontendCSS-TutorialCSS -Filtereffekte: Unschärfe, Graustufen, Helligkeit und mehr in CSS!

CSS -Filter: Eine umfassende Anleitung zur Bildmanipulation

CSS Filter Effects: Blur, Grayscale, Brightness and More in CSS!

Beispiele für CSS -Filtereffekte.

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!

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Simulation der MausbewegungSimulation der MausbewegungApr 22, 2025 am 11:45 AM

Wenn Sie jemals eine interaktive Animation während eines Live -Vortrags oder einer Klasse anzeigen mussten, wissen Sie vielleicht, dass es nicht immer einfach ist, mit Ihren Folien zu interagieren

Suchen Sie die Suche mit Astro -Aktionen und Fuse.jsSuchen Sie die Suche mit Astro -Aktionen und Fuse.jsApr 22, 2025 am 11:41 AM

Mit Astro können wir während unseres Builds den größten Teil unserer Website generieren, verfügen jedoch über ein kleines Stück serverseitiger Code, mit dem Suchfunktionen mithilfe von so etwas wie Fuse.js. In dieser Demo werden wir Fuse verwenden, um eine Reihe persönlicher "Lesezeichen" zu durchsuchen.

Undefiniert: der dritte boolesche WertUndefiniert: der dritte boolesche WertApr 22, 2025 am 11:38 AM

Ich wollte eine Benachrichtigungsnachricht in einem meiner Projekte implementieren, ähnlich wie in Google Docs, während ein Dokument speichert. Mit anderen Worten, a

Zur Verteidigung der ternären ErklärungZur Verteidigung der ternären ErklärungApr 22, 2025 am 11:25 AM

Vor einigen Monaten war ich in Hacker News (wie einer) und stieß auf einen (jetzt gelöschten) Artikel über die Nichtverwendung von If -Anweisungen. Wenn Sie neu in dieser Idee sind (wie ich

Verwenden der Web -Sprach -API für mehrsprachige ÜbersetzungenVerwenden der Web -Sprach -API für mehrsprachige ÜbersetzungenApr 22, 2025 am 11:23 AM

Seit den frühen Tagen der Science -Fiction haben wir über Maschinen geträumt, die mit uns sprechen. Heute ist es alltäglich. Trotzdem die Technologie für die Herstellung

Jetpack Gutenberg BlöckeJetpack Gutenberg BlöckeApr 22, 2025 am 11:20 AM

Ich erinnere mich, als Gutenberg in den Kern entlassen wurde, weil ich an diesem Tag in Wordcamp war. Inzwischen sind einige Monate vergangen, also stelle ich mir immer mehr von uns vor

Erstellen einer wiederverwendbaren Paginationskomponente in VueErstellen einer wiederverwendbaren Paginationskomponente in VueApr 22, 2025 am 11:17 AM

Die Idee hinter den meisten Webanwendungen besteht darin, Daten aus der Datenbank abzurufen und sie dem Benutzer bestmöglich vorzustellen. Wenn wir dort mit Daten umgehen

Verwenden Sie 'Box Shadows' und Clip-Pad zusammenVerwenden Sie 'Box Shadows' und Clip-Pad zusammenApr 22, 2025 am 11:13 AM

Lassen Sie sich ein wenig Schritt für Schritt von einer Situation machen, in der Sie nicht ganz das tun können, was zu sinnvoll ist, aber Sie können es trotzdem mit CSS-Tricks erledigen. In diesem

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Leistungsstarke integrierte PHP-Entwicklungsumgebung

mPDF

mPDF

mPDF ist eine PHP-Bibliothek, die PDF-Dateien aus UTF-8-codiertem HTML generieren kann. Der ursprüngliche Autor, Ian Back, hat mPDF geschrieben, um PDF-Dateien „on the fly“ von seiner Website auszugeben und verschiedene Sprachen zu verarbeiten. Es ist langsamer und erzeugt bei der Verwendung von Unicode-Schriftarten größere Dateien als Originalskripte wie HTML2FPDF, unterstützt aber CSS-Stile usw. und verfügt über viele Verbesserungen. Unterstützt fast alle Sprachen, einschließlich RTL (Arabisch und Hebräisch) und CJK (Chinesisch, Japanisch und Koreanisch). Unterstützt verschachtelte Elemente auf Blockebene (wie P, DIV),

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

PHPStorm Mac-Version

PHPStorm Mac-Version

Das neueste (2018.2.1) professionelle, integrierte PHP-Entwicklungstool

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools