CSS
Filtruj właściwość
Szukaj…
Składnia
- filtr: brak (wartość domyślna)
- filter: initial (domyślnie brak);
- filter: inherit (domyślnie wartość nadrzędna);
- filtr: rozmycie (px)
- filtr: jasność (liczba |%)
- filtr: kontrast (liczba |%)
- filtr: cień-cień (poziomy-cień-px pionowy-cień-px cień-rozmycie-px cień- - rozkładany kolor)
- filtr: skala szarości (liczba |%)
- filtr: hue-rotate (deg)
- filtr: inwertowany (liczba |%)
- filtr: krycie (liczba |%)
- filtr: nasycony (liczba |%)
- filtr: sepia (liczba |%)
Parametry
| Wartość | Opis |
|---|---|
| rozmycie (x) | Rozmywa obraz o x pikseli. |
| jasność (x) | Rozjaśnia obraz o dowolną wartość powyżej 1,0 lub 100%. Poniżej obraz zostanie przyciemniony. |
| kontrast (x) | Zapewnia większy kontrast do obrazu przy dowolnej wartości powyżej 1,0 lub 100%. Poniżej obraz będzie mniej nasycony. |
| cień (h, v, x, y, z) | Nadaje obrazowi cień. hi v mogą mieć wartości ujemne. x, yiz są opcjonalne. |
| skala szarości (x) | Pokazuje obraz w skali szarości, z maksymalną wartością 1,0 lub 100%. |
| hue-rotate (x) | Stosuje obrót odcienia do obrazu. |
| odwrócenie (x) | Odwraca kolor obrazu o maksymalnej wartości 1,0 lub 100%. |
| nieprzezroczystość (x) | Ustawia stopień nieprzezroczystości / przezroczystości obrazu przy maksymalnej wartości 1,0 lub 100%. |
| nasycony (x) | Nasyca obraz przy dowolnej wartości powyżej 1,0 lub 100%. Poniżej obraz zacznie się nasycać. |
| sepia (x) | Przekształca obraz w sepię o maksymalnej wartości 1,0 lub 100%. |
Uwagi
Ponieważ filtr jest funkcją eksperymentalną, należy użyć przedrostka -webkit. Może się zmieniać składnia i zachowanie, ale zmiany prawdopodobnie będą niewielkie.
Może nie być obsługiwany w starszych wersjach głównych przeglądarek. Może być całkowicie nieobsługiwany w przeglądarkach mobilnych.
Ze względu na stosunkowo ograniczone wsparcie, spróbuj użyć
box-shadowzamiastfilter: drop-shadow(). Użyj opcjiopacityzamiastfilter: opacity().Może być animowany przez Javascript / jQuery. W przypadku Javascript użyj
object.style.WebkitFilter.W3Schools ma również stronę demonstracyjną dla wszystkich różnych typów wartości filtrów.
Upuść cień (zamiast tego użyj pola cienia, jeśli to możliwe)
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);
}
Wynik
Wiele wartości filtrów
Aby użyć wielu filtrów, oddziel każdą wartość spacją.
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%);
}
Wynik
Barwa Obróć
HTML
<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />
CSS
img {
-webkit-filter: hue-rotate(120deg);
filter: hue-rotate(120deg);
}
Wynik
Odwróć kolor
HTML
<div></div>
CSS
div {
width: 100px;
height: 100px;
background-color: white;
-webkit-filter: invert(100%);
filter: invert(100%);
}
Wynik
Zmienia kolor z białego na czarny.
Plama
HTML
<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />
CSS
img {
-webkit-filter: blur(1px);
filter: blur(1px);
}
Wynik
Sprawia, że chcesz pocierać okulary.