Miten luoda: Lisää kuvavaikutuksia

Opi, miten lisätä visuaalisia vaikutuksia kuviin.

Kuvasuodattimet

Kokeile itse

CSS Suodattimet

CSS filter Ominaisuus lisää elementtiin visuaalisia vaikutuksia (kuten sumennusta ja saturaatiota).

Huomioitavaa:Internet Explorer, Edge 12 tai Safari 5.1 ja aikaisemmat versiot eivät tue filter Ominaisuus.

Harmaaesimerkki

Muuta kaikkien kuvien värejä mustavalkoisiksi (100% harmaaksi):

Kukkapuutarha
Alkuperäinen kuva
Kukkapuutarha
Harmaa (100%)
img {
    -webkit-filter: harmaa (100%); /* Safari 6.0 - 9.0 */
    filter: harmaa (100%);
}

Kokeile itse

Sumennusesimerkki

Soveltamaan sumennusvaikutusta kaikille kuville:

Kukkapuutarha
Alkuperäinen kuva
Kukkapuutarha
Sumennys (5 pikseliä)
img {
  -webkit-filter: sumen (5px); /* Safari 6.0 - 9.0 */
  filter: sumen (5px);
}

Kokeile itse

Liittyvät sivut

Viittauskirja:CSS filter ominaisuus