CSS saturate() funktio

Määrittely ja käyttö

CSS: saturate() Suodatinfunktioja käytetään elementin värikylläisyyden (väriintensiteetin) säätämiseen.

  • 0% (tai 0) tekee elementistä täysin värikylläisyyden menettämisen
  • 100% (tai 1) ei vaikuta
  • 200% (tai 2) tekee elementistä ylivaltaisen värikylläisen

Esimerkki

Esimerkki 1

Aseta eri värikylläisyyksiä kuville:

#img1 {
  filter: saturate(0);
}
#img2 {
  filter: saturate(100%);
}
#img3 {
  filter: saturate(200%);
}

Kokeile itse

Esimerkki 2

määrittää saturate() ja backdrop-filter Käytä ominaisuuksia yhdessä:

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

Kokeile itse

CSS syntax

saturate(amount)
Arvo Kuvaus
amount

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

0% (tai 0) tekee elementistä täysin värikylläisyyden menettämisen.

100% (tai 1) tarkoittaa ilman vaikutusta.

Yli 100% arvot tarjoavat ylivaltaisen värikylläisyyden.

Tekninen tarkistus

Versio: CSS Filter Effects Module Level 1

Selaimen tuki

Taulukossa olevat numerot ilmaisevat ensimmäisen täysin tukevan selaimen version.

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 grayscale() funktio

Viittaus:CSS hue-rotate() funktio

Viittaus:CSS invert() funktio

Viittaus:CSS opacity() funktio

Viittaus:CSS sepia() funktio