CSS hue-rotate() functie

definitie en gebruik

CSS hue-rotate() filterfuncties passen een kleurrotatie toe op het element.

voorbeeld

voorbeeld 1

stel verschillende kleurrotaties in voor afbeeldingen:

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

probeer het zelf

voorbeeld 2

zet hue-rotate() en backdrop-filter gebruik van eigenschappen samen:

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

probeer het zelf

CSS syntaxis

hue-rotate(hoek)
waarde beschrijving
hoek

optioneel. Specificeer een hoek om de relatieve verandering van de toon van de invoersample aan te geven.

Positieve waarden verhogen de toonwaarde, negatieve waarden verlagen de toonwaarde.

0deg betekent het oorspronkelijke beeld (geen effect).

de standaardwaarde is 0.

technische details

versie: CSS Filter Effects Module Level 1

browserondersteuning

De cijfers in de tabel geven de browserversie aan die de functie volledig ondersteunt.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

gerelateerde pagina's

Referentie:CSS filter eigenschap

Referentie:CSS blur() functie

Referentie:CSS brightness() functie

Referentie:CSS contrast() functie

Referentie:CSS drop-shadow() functie

Referentie:CSS grayscale() functie

Referentie:CSS invert() functie

Referentie:CSS opacity() functie

Referentie:CSS saturate() functie

Referentie:CSS sepia() functie