CSS contrast() -funktio

Määrittely ja käyttö

CSS:n contrast() Sivun terävyyttä säätelevät suodattimet.

  • 0% tekee kuvasta täysin harmaan
  • 100% (tai 1) on oletusarvo, joka edustaa alkuperäistä kuvaa
  • Yli 100% -arvot lisäävät kontrastia
  • Alle 100% -arvot vähentävät kontrastia

Esimerkki

Esimerkki 1

Lisää ja vähennä kuvan kontrastia:

#img1 {
  filter: contrast(150%);
}
#img2 {
  filter: contrast(50%);
}

Kokeile itse

Esimerkki 2

muuttaa contrast() ja backdrop-filter Yhdistä attributeja:

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

Kokeile itse

CSS-grammatiikka

contrast(amount)
Arvo Kuvaus
amount

Valinnainen. Määritä kontrastiarvo, joka voi olla luku tai prosentti.

0% tekee elementistä täysin harmaan.

100% (tai 1) on oletusarvo, joka edustaa alkuperäistä kuvaa (ei vaikutusta).

Yli 100% -arvot lisäävät kontrastia, alle 100% -arvot vähentävät kontrastia.

Tekninen tarkistus

Versio: CSS Filter Effects Module Level 1

Selaimen tuki

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

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Liittyvät sivut

Viittaus:CSS suodatin ominaisuus

Viittaus:CSS blur() -funktio

Viittaus:CSS brightness() -funktio

Viittaus:CSS drop-shadow() -funktio

Viittaus:CSS grayscale() -funktio

Viittaus:CSS hue-rotate() -funktio

Viittaus:CSS invert() -funktio

Viittaus:CSS opacity() -funktio

Viittaus:CSS saturate() funktio

Viittaus:CSS sepia() funktio