CSS invert() funktio

Edellinen sivu CSS inset() funktio
Seuraava sivu CSS lab() funktio
Takaisin ylös CSS funktioviittauskäsikirja

Määrittely ja käyttö

CSS:n invert() Suodattimifunktiot käytetään kuvan värien kääntämiseen.

100% (1) tekee kuvasta täysin käänteisen
0% (0) ei aiheuta minkäänlaista vaikutusta

Esimerkki

Esimerkki 1

Käänteinen kuvan väri:

#img1 {
  filter: invert(0.3);
}
#img2 {
  filter: invert(70%);
}
#img3 {
  filter: invert(100%);
}

Kokeile itse

Esimerkki 2

tekee invert() ja backdrop-filter Ominaisuudet yhdessä käytettynä:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: invert(100%);
  backdrop-filter: invert(100%);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

Kokeile itse

CSS syntaksi

invert(amount)

Arvo	Kuvaus
amount	Valinnainen. Määrittää käänteisen asteen, joka voi olla luku tai prosentti. 100% (1) tekee elementistä täysin käänteisen, 0% (0) edustaa alkuperäistä kuvaa (ei vaikutusta). Oletusarvo on 0。

Arvo

Kuvaus

amount

Valinnainen. Määrittää käänteisen asteen, joka voi olla luku tai prosentti.

100% (1) tekee elementistä täysin käänteisen, 0% (0) edustaa alkuperäistä kuvaa (ei vaikutusta).

Oletusarvo on 0。