Funkcja CSS saturate()

Definicja i użycie

CSS saturate() Funkcje filtrów służą do dostosowywania nasycenia elementu (silności koloru).

  • 0% (lub 0) sprawia, że element jest całkowicie desaturowany
  • 100% (lub 1) nie ma efektu
  • 200% (lub 2) sprawia, że element jest nadmiernie nasycony

Przykład

Przykład 1

Ustaw różne nasycenia obrazów:

#img1 {
  filter: saturate(0);
}
#img2 {
  filter: saturate(100%);
}
#img3 {
  filter: saturate(200%);
}

Spróbuj sam

Przykład 2

ustawia saturate() z backdrop-filter Użycie kombinacyjne atrybutów:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: saturate(450%);
  backdrop-filter: saturate(450%);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

Spróbuj sam

Gramatyka CSS

saturate(amount)
Wartość Opis
amount

Opcjonalne. Określa wartość nasycenia, może być liczbą lub procentem.

0% (lub 0) sprawia, że element jest całkowicie desaturowany.

100% (lub 1) oznacza brak efektu.

Wartości powyżej 100% zapewniają efekt nadmiernego nasycenia.

Szczegóły techniczne

Wersja: Moduł efektów filtrów CSS poziom 1

Wsparcie przeglądarki

Liczby w tabeli oznaczają pierwszą wersję przeglądarki, która w pełni obsługuje tę funkcję.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Strony związane

Odniesienia:Atrybut filter w CSS

Odniesienia:Funkcja CSS blur()

Odniesienia:Funkcja CSS brightness()

Odniesienia:Funkcja CSS contrast()

Odniesienia:Funkcja CSS drop-shadow()

Odniesienia:Funkcja CSS grayscale()

Odniesienia:Funkcja CSS hue-rotate()

Odniesienia:Funkcja CSS invert()

Odniesienia:Funkcja opacity() w CSS

Odniesienia:Funkcja sepia() w CSS