CSS grayscale() funktio

Määrittely ja käyttö

CSS:n grayscale() Suodatusfunktio muuntaa kuvan harmaaksi.

  • 100% (tai 1) tekee kuvasta täysin harmaan
  • 0% (tai 0) ei vaikuta

Esimerkki

Esimerkki 1

Aseta eri harmausarvot kuville:

#img1 {
  filter: grayscale(1);
}
#img2 {
  filter: grayscale(60%);
}
#img3 {
  filter: grayscale(0.4);
}

Kokeile itse

Esimerkki 2

muuntaa grayscale() ja backdrop-filter Ominaisuuksien yhdistelmä käyttöön:

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

Kokeile itse

CSS syntaksi

grayscale(amount)
Arvo Kuvaus
amount

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

100% (tai 1) tekee elementistä täysin harmaata.

0% (tai 0) tarkoittaa alkuperäistä kuvaa (ei vaikutusta).

Oletusarvo on 1。

Tekninen yksityiskohta

Versio: CSS Filter Effects Module Level 1

Selaimen tuki

Taulukossa olevat numerot ilmaisevat ensimmäisen selaimen version, joka täysin tukee tätä funktiota.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Liittyvät sivut

Viittaus:CSS filter ominaisuus

Viittaus:CSS blur() funktio

Viittaus:CSS brightness() funktio

Viittaus:CSS contrast() funktio

Viittaus:CSS drop-shadow() funktio

Viittaus:CSS hue-rotate() funktio

Viittaus:CSS invert() funktio

Viittaus:CSS opacity() funktio

Viittaus:CSS saturate() funktio

Viittaus:CSS sepia() funktio