filter: blur, brightness, contrast, grayscale
Wenden Sie mit den Funktionen der CSS-Eigenschaft filter fotografische Filtereffekte auf Elemente an.
filter: blur, brightness, contrast, grayscale ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Die CSS-Eigenschaft filter
Die Eigenschaft filter wendet grafische Effekte auf Elemente an — ähnlich wie Einstellungsebenen in Photoshop — ohne das eigentliche Bild zu bearbeiten.
filter: blur()
Wendet eine Gaußsche Unschärfe an. Das Argument ist der Unschärferadius.
<div class="frosted"></div>
<div class="hero-bg"></div>
filter: brightness()
Passt die Helligkeit an. 1 = Original, 0 = Schwarz, 2 = doppelte Helligkeit.
<div class="dimmed"></div>
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" width="120" height="120" alt="sample" />
filter: contrast()
Passt den Kontrast an. 1 = Original, 0 = einheitliches Grau, Werte über 1 erhöhen den Kontrast.
<div class="high-contrast"></div>
<div class="low-contrast"></div>
filter: grayscale()
Wandelt das Bild in Graustufen um. 0 = vollständige Farbe, 1 (oder 100 %) = vollständig grau.
<div class="grayscale"></div>
<div class="portfolio-item"></div>
filter: saturate()
Passt die Farbsättigung an. 0 = Grau, 1 = Original, Werte über 1 = kräftige Farben.
<div class="vivid"></div>
<div class="muted"></div>
filter: hue-rotate()
Dreht den Farbtonkreis um einen bestimmten Winkel — dadurch werden alle Farben auf dem Farbkreis verschoben.
<div class="hue-shifted"></div>
<div class="rainbow-demo"></div>
filter: sepia()
Wendet einen warmen Sepiaton im Vintage-Stil an. 0 = Original, 1 = vollständiger Sepiaton.
<div class="vintage"></div>
filter: drop-shadow()
Ähnlich wie box-shadow, folgt jedoch der tatsächlich gerenderten Form des Elements (einschließlich transparenter Bereiche). Ideal für unregelmäßige PNG-Bilder.
<div class="icon">★</div>
Mehrere Filter kombinieren
Verketten Sie mehrere Filterfunktionen, indem Sie sie durch Leerzeichen trennen. Sie werden von links nach rechts angewendet:
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" width="150" height="100" alt="photo" />
<div class="dramatic"></div>
filter erzeugt einen Stacking Context
Wenn Sie filter auf ein Element anwenden, wird ein neuer Stacking Context erzeugt. Dadurch kann sich position: fixed bei untergeordneten Elementen wie position: absolute verhalten — ein häufiger Fehler.
Kurzer Test
Welche CSS-Filterfunktion wendet eine Gaußsche Unschärfe auf ein Element an?
Zusammenfassung
Die Eigenschaft filter wendet fotografische Anpassungen an: blur(), brightness(), contrast(), grayscale(), saturate(), hue-rotate(), sepia() und drop-shadow(). Verketten Sie mehrere Funktionen durch Leerzeichen. Denken Sie daran, dass filter einen Stacking Context erzeugt, der sich auf untergeordnete Elemente mit fester Position auswirken kann.
Häufig gestellte Fragen
Ist die Lektion „filter: blur, brightness, contrast, grayscale“ kostenlos?
Ja — der vollständige Text von „filter: blur, brightness, contrast, grayscale“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „filter: blur, brightness, contrast, grayscale“?
Wenden Sie mit den Funktionen der CSS-Eigenschaft filter fotografische Filtereffekte auf Elemente an. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „filter: blur, brightness, contrast, grayscale“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- filter: blur, brightness, contrast, grayscale
- backdrop-filter für Milchglaseffekte
- mix-blend-mode zum Mischen von Ebenen
- Die Eigenschaft isolation