Question 1

Welche CSS-Filterfunktionen sind verfügbar?

Accepted Answer

CSS filter unterstützt: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate und sepia. Sie können mehrere Filter in einer einzigen filter-Eigenschaft kombinieren, die in der aufgelisteten Reihenfolge angewendet werden.

Question 2

Beeinflusst die CSS-filter-Eigenschaft die Performance?

Accepted Answer

CSS-Filter werden in modernen Browsern GPU-beschleunigt, aber starkes blur oder mehrere gestapelte Filter können die Rendering-Performance beeinträchtigen, besonders auf Mobilgeräten. Für Animationen verwenden Sie will-change: filter zur Optimierung.

Question 3

Kann ich CSS-Filter nur auf den Hintergrund anwenden (nicht auf Kindelemente)?

Accepted Answer

Nein, die filter-Eigenschaft gilt für das gesamte Element einschließlich seiner Kinder. Um nur den Hintergrund zu filtern, verwenden Sie backdrop-filter für einen Glasmorphismus-Effekt oder isolieren Sie den Hintergrund in einem separaten Pseudo-Element.

Question 4

Was ist der Unterschied zwischen filter: opacity() und der opacity-Eigenschaft?

Accepted Answer

Beide steuern die Transparenz, aber filter: opacity() nutzt Hardware-Beschleunigung und kann mit anderen filter-Funktionen kombiniert werden. Die opacity-Eigenschaft ist einfacher und erstellt einen neuen Stapelkontext. Für einfache Deckkraft wird die opacity-Eigenschaft bevorzugt.

Question 5

Können CSS-Filter auf SVG-Elemente angewendet werden?

Accepted Answer

Ja. CSS-Filter gelten für SVG-Elemente genauso wie für HTML-Elemente. Zusätzlich hat SVG eigene Filter-Primitive (feBlur, feColorMatrix usw.), die mehr Kontrolle bieten als CSS-Filter-Kürzel.

CSS Filter Generator

Filter

Häufig gestellte Fragen

Comments & Feedback