Polecane kursy:

Funkcja CSS sepia()

Definicja i użycie sepia() CSS

  • Funkcja filtru przekształca obraz w brązowy (barwny, bardziej ciepły, bardziej brązowy/czerwony kolor).
  • 100% (lub 1) sprawi, że obraz całkowicie zmieni się w brązowy

0% (lub 0) oznacza brak efektu

Przykład

przykład 1

ustaw różne efekty brązowego dla obrazów:
  #img1 {
}
filter: sepia(1);
  #img2 {
}
filter: sepia(60%);
  #img3 {
}

Spróbuj sam

filter: sepia(0.4);

przykład 2 sepia() z backdrop-filter Użycie połączone właściwości:

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

Spróbuj sam

Gramatyka CSS

sepia(amount)
Wartość Opis
amount

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

100% (lub 1) sprawi, że element całkowicie zmieni się w brązowy.

0% (lub 0) oznacza oryginalny obraz (brak efektu). Domyślna wartość to 0.

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

Odnośniki:Atrybut filter w CSS

Odnośniki:Funkcja CSS blur()

Odnośniki:Funkcja CSS brightness()

Odnośniki:Funkcja CSS contrast()

Odnośniki:Funkcja CSS drop-shadow()

Odnośniki:Funkcja CSS grayscale()

Odnośniki:Funkcja CSS hue-rotate()

Odnośniki:Funkcja CSS invert()

Odnośniki:Funkcja opacity() w CSS

Odnośniki:Funkcja saturate() w CSS