Funkcja CSS contrast()

Definicja i użycie

CSS contrast() Funkcje filtrów służą do dostosowywania kontrastu elementu.

  • 0% sprawi, że obraz całkowicie staje się szary
  • 100% (lub 1) to wartość domyślna, oznaczająca oryginalny obraz
  • Wartości powyżej 100% zwiększają kontrast
  • Wartości poniżej 100% zmniejszają kontrast

Przykład

Przykład 1

Zwiększanie i zmniejszanie kontrastu obrazu:

#img1 {
  filter: contrast(150%);
}
#img2 {
  filter: contrast(50%);
}

Spróbuj sam

Przykład 2

przekształca contrast() z backdrop-filter Kombinacja atrybutów:

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

Spróbuj sam

Gramatyka CSS

contrast(amount)
Wartość Opis
amount

Opcjonalne. Określa wartość kontrastu, która może być liczbą lub procentem.

0% sprawi, że element całkowicie staje się szary.

100% (lub 1) to wartość domyślna, oznaczająca oryginalny obraz (bez efektu).

Wartości powyżej 100% zwiększają kontrast, podczas gdy wartości poniżej 100% zmniejszają kontrast.

Szczegóły techniczne

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

Obsługa przeglądarek

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

Referencje:Atrybut filter w CSS

Referencje:Funkcja CSS blur()

Referencje:Funkcja CSS brightness()

Referencje:Funkcja CSS drop-shadow()

Referencje:Funkcja CSS grayscale()

Referencje:Funkcja CSS hue-rotate()

Referencje:Funkcja CSS invert()

Referencje:Funkcja CSS opacity()

Referencje:Funkcja saturate() w CSS

Referencje:Funkcja sepia() w CSS