CSS hue-rotate() funktio

Määritelmä ja käyttö

CSS hue-rotate() Suodatinfunktio soveltaa väripyörtymistä elementtiin.

Esimerkki

Esimerkki 1

Aseta eri väripyörtyminen kuville:

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

Kokeile itse

Esimerkki 2

muuttaa hue-rotate() ja backdrop-filter Yhdistä etuudet:

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

Kokeile itse

CSS syntax

hue-rotate(kulma)
Arvo Kuvaus
kulma

Valinnainen. Määritä kulma, joka ilmaisee syötteen sävyn suhteellisen muutoksen.

Positiiviset arvot lisäävät sävyarvoa, negatiiviset arvot vähentävät sävyarvoa.

0deg tarkoittaa alkuperäistä kuvaa (ei vaikutusta).

Oletusarvo on 0。

Tekninen yksityiskohta

Versio: CSS Filter Effects Module Level 1

Selaimen tuki

Taulukossa olevat numerot merkitsevät ensimmäistä selainta, joka täysin tukee tätä funktiota.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Liittyvät sivut

Viittaus:CSS suodin ominaisuus

Viittaus:CSS blur() funktio

Viittaus:CSS brightness() funktio

Viittaus:CSS contrast() funktio

Viittaus:CSS drop-shadow() funktio

Viittaus:CSS grayscale() funktio

Viittaus:CSS invert() funktio

Viittaus:CSS opacity() funktio

Viittaus:CSS saturate() funktio

Viittaus:CSS sepia() funktio