Funkcja hue-rotate() w CSS

Definicja i użycie

CSS hue-rotate() Funkcje filtrów aplikują kolorowy obrót na elementach.

Przykład

Przykład 1

Ustawienie różnych旋转颜色 dla obrazów:

#img1 {
  filter: hue-rotate(200deg);
}
#img2 {
  filter: hue-rotate(90deg);
}
#img3 {
  filter: hue-rotate(-90deg);
}

Spróbuj sam

Przykład 2

z hue-rotate() z backdrop-filter Kombinacja atrybutów:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: hue-rotate(90deg);
  backdrop-filter: hue-rotate(90deg);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

Spróbuj sam

Gramatyka CSS

hue-rotate(kąt)
Wartość Opis
kąt

Opcjonalne. Określa kąt, który reprezentuje względne zmiany tonacji próbki wejściowej.

Wartości dodatnie zwiększają wartość tonacji, a wartości ujemne zmniejszają wartość tonacji.

0deg oznacza oryginalny obraz (brak efektu).

Domyślna wartość to 0.

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

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 invert()

Odnośniki:Funkcja opacity() w CSS

Odnośniki:Funkcja saturate() w CSS

Odnośniki:Funkcja sepia() w CSS