CSS hue-rotate() funktion

Definition och användning

CSS hue-rotate() Filterfunktioner tillämpar färgrotation på elementen.

Exempel

Exempel 1

Ange olika färgrotationer för bilderna:

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

Prova själv

Exempel 2

använder hue-rotate() och backdrop-filter Använd egenskaper tillsammans:

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

Prova själv

CSS Syntax

hue-rotate(angle)
Värde Beskrivning
angle

Valfritt. Ange en vinkel som representerar den relativa förändringen av inmatningens nyans.

Positiva värden ökar nyansvärdet, negativa värden minskar nyansvärdet.

0deg representerar det ursprungliga bildet (ingen effekt).

Standardvärdet är 0.

Tekniska detaljer

Version: CSS Filter Effects Module Level 1

Webbläsarstöd

Tal i tabellen representerar den första webbläsarversion som fullständigt stöder denna funktion.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Relaterade sidor

Referens:CSS filter egenskap

Referens:CSS blur() funktion

Referens:CSS brightness() funktion

Referens:CSS contrast() funktion

Referens:CSS drop-shadow() funktion

Referens:CSS grayscale() funktion

Referens:CSS invert() funktion

Referens:CSS opacity() funktion

Referens:CSS saturate() funktion

Referens:CSS sepia() funktion