Looking for css Keywords? Try Ask4Keywords

CSSEigenschaft filtern


Syntax

  • filter: none (Standardwert)
  • filter: initial (Standardeinstellung ist none);
  • filter: vererben (Standardwert ist der übergeordnete Wert);
  • Filter: Unschärfe (px)
  • Filter: Helligkeit (Anzahl |%)
  • Filter: Kontrast (Anzahl |%)
  • Filter: Schattenwurf (horizontal-shadow-px vertikal-shadow-px shadow-blur-px shadow - Farbe ausbreiten
  • Filter: Graustufen (Anzahl |%)
  • Filter: Farbton-Drehung (Grad)
  • Filter: invertieren (Anzahl |%)
  • Filter: Deckkraft (Anzahl |%)
  • Filter: gesättigt (Anzahl |%)
  • Filter: Sepia (Anzahl |%)

Parameter

Wert Beschreibung
Unschärfe (x) Verwischt das Bild um x Pixel.
Helligkeit (x) Hellt das Bild auf einen Wert über 1,0 oder 100% auf. Darunter wird das Bild dunkler.
Kontrast (x) Bietet bei einem Wert über 1,0 oder 100% mehr Kontrast zum Bild. Darunter wird das Bild weniger gesättigt.
Schlagschatten (h, v, x, y, z) Verleiht dem Bild einen Schatten. h und v können negative Werte haben. x, y und z sind optional.
Graustufen (x) Zeigt das Bild in Graustufen mit einem Maximalwert von 1,0 oder 100% an.
Farbton drehen (x) Wendet eine Farbrotation auf das Bild an
invertieren (x) Kehrt die Farbe des Bildes mit einem Maximalwert von 1,0 oder 100% um.
Deckkraft (x) Legt fest, wie undurchsichtig / transparent das Bild mit einem Höchstwert von 1,0 oder 100% ist.
gesättigt (x) Sättigt das Bild bei einem Wert über 1,0 oder 100%. Darunter beginnt das Bild zu sättigen.
Sepia (x) Wandelt das Bild mit einem Maximalwert von 1,0 oder 100% in Sepia um.

Bemerkungen

  1. Da der Filter eine experimentelle Funktion ist, sollten Sie das Präfix -webkit verwenden. Es kann sich in Syntax und Verhalten ändern, aber die Änderungen werden wahrscheinlich gering sein.

  2. Es wird möglicherweise in älteren Versionen der wichtigsten Browser nicht unterstützt. In mobilen Browsern wird dies möglicherweise nicht unterstützt.

  3. Versuchen Sie aufgrund der relativ eingeschränkten Unterstützung, box-shadow anstelle von filter: drop-shadow() . Verwenden Sie opacity anstelle von filter: opacity() .

  4. Es kann durch Javascript / jQuery animiert werden. Verwenden object.style.WebkitFilter für Javascript object.style.WebkitFilter .

  5. Überprüfen Sie W3Schools oder MDN für weitere Informationen.

  6. W3Schools hat auch eine Demo - Seite für alle die verschiedenen Arten von Filterwerten.

Eigenschaft filtern Verwandte Beispiele