CSS hue-rotate() funktion

Definition og brug

CSS hue-rotate() Filterfunktioner anvender farverotation til elementer.

Eksempel

Eksempel 1

Indstil forskellige farverotationer til billeder:

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

Prøv det selv

Eksempel 2

for hue-rotate() med backdrop-filter Brug af egenskaber sammen

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

Prøv det selv

CSS syntaks

hue-rotate(angle)
Værdi Beskrivelse
angle

Valgfri. Angiv en vinkel, der repræsenterer den relative ændring af inputprøvens farvetone.

Positive værdier øger farvetoneværdien, negative værdier reducerer farvetoneværdien.

0deg betyder originalbilledet (ingen effekt).

Standardværdien er 0.

Tekniske detaljer

Version: CSS Filter Effects Module Level 1

Browserstøtte

Tabelens tal viser den første browserversion, der fuldt ud understøtter funktionen.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Relaterede sider

Referencer:CSS filter egenskab

Referencer:CSS blur() funktion

Referencer:CSS brightness() funktion

Referencer:CSS contrast() funktion

Referencer:CSS drop-shadow() funktion

Referencer:CSS grayscale() funktion

Referencer:CSS invert() funktion

Referencer:CSS opacity() funktion

Referencer:CSS saturate() funktion

Referencer:CSS sepia() funktion