CSS
Eigenschaft filtern
Suche…
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
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.
Es wird möglicherweise in älteren Versionen der wichtigsten Browser nicht unterstützt. In mobilen Browsern wird dies möglicherweise nicht unterstützt.
Versuchen Sie aufgrund der relativ eingeschränkten Unterstützung,
box-shadowanstelle vonfilter: drop-shadow(). Verwenden Sieopacityanstelle vonfilter: opacity().Es kann durch Javascript / jQuery animiert werden. Verwenden
object.style.WebkitFilterfür Javascriptobject.style.WebkitFilter.Überprüfen Sie W3Schools oder MDN für weitere Informationen.
W3Schools hat auch eine Demo - Seite für alle die verschiedenen Arten von Filterwerten.
Schlagschatten (wenn möglich Box-Schatten verwenden)
HTML
<p>My shadow always follows me.</p>
CSS
p {
-webkit-filter: drop-shadow(10px 10px 1px green);
filter: drop-shadow(10px 10px 1px green);
}
Ergebnis
Mehrere Filterwerte
Um mehrere Filter zu verwenden, trennen Sie jeden Wert durch ein Leerzeichen.
HTML
<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />
CSS
img {
-webkit-filter: brightness(200%) grayscale(100%) sepia(100%) invert(100%);
filter: brightness(200%) grayscale(100%) sepia(100%) invert(100%);
}
Ergebnis
Farbton drehen
HTML
<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />
CSS
img {
-webkit-filter: hue-rotate(120deg);
filter: hue-rotate(120deg);
}
Ergebnis
Farbe umkehren
HTML
<div></div>
CSS
div {
width: 100px;
height: 100px;
background-color: white;
-webkit-filter: invert(100%);
filter: invert(100%);
}
Ergebnis
Wechselt von Weiß zu Schwarz.
Verwischen
HTML
<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />
CSS
img {
-webkit-filter: blur(1px);
filter: blur(1px);
}
Ergebnis
Willst du deine Brille reiben?