CSS hue-rotate() Funktion

Definition und Verwendung

CSS hue-rotate() Filterfunktionen wenden Farbeinrotation auf das Element an.

Beispiel

Beispiel 1

Verschiedene Farbrotationen für Bilder einstellen:

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

Versuchen Sie es selbst

Beispiel 2

wird hue-rotate() mit backdrop-filter Attribute kombiniert verwenden:

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;
}

Versuchen Sie es selbst

CSS Syntax

hue-rotate(Winkel)
Wert Beschreibung
Winkel

Optional. Gibt einen Winkel an, der die relative Veränderung des Farbtons des Eingabesamples angibt.

Positive Werte erhöhen den Farbtonwert, negative Werte verringern ihn.

0deg bedeutet das Originalbild (kein Effekt).

Standardwert ist 0.

Technische Details

Version: CSS Filter Effects Module Level 1

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die erste vollständige Versionsnummer der Browser dar, die diese Funktion unterstützen.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Verwandte Seiten

Referenz:CSS filter Eigenschaft

Referenz:CSS blur() Funktion

Referenz:CSS brightness() Funktion

Referenz:CSS contrast() Funktion

Referenz:CSS drop-shadow() Funktion

Referenz:CSS grayscale() Funktion

Referenz:CSS invert() Funktion

Referenz:CSS opacity() Funktion

Referenz:CSS saturate() Funktion

Referenz:CSS sepia() Funktion