Miten luodaan: mustavalkoinen kuva

Opitaan, miten CSS:ää käytetään luodakseen mustavalkoisia kuvia.

Mustavalkoinen kuva

Käytä CSS:ää filter Ominaisuus muuntaa kuvan mustavalkoiseksi kuvaksi.

Kukkapuutarha
Alkuperäinen kuva
Kukkapuutarha
Harmaasävy (100%)

Harmaasävy esimerkki

Muuta kaikki kuvien värit mustavalkoisiksi (100% harmaasävy):

img {
  -webkit-filter: harmaasävy(100%); /* Safari 6.0 - 9.0 */
  filter: harmaasävy(100%);
}

Kokeile itse

Liittyvät sivut

Oppitunti:CSS-kuvat

Viittaus:CSS-filtteri-ominaisuus