Hur man skapar: Lägg till bildeffekter

Lär dig hur du lägger till visuella effekter till bilder.

Bildeffekter

Prova själv

CSS Filters

CSS filter Egenskapen lägger till visuella effekter till element (t.ex. oskärpa och saturation).

Observera:Internet Explorer, Edge 12 eller Safari 5.1 och äldre versioner stöder inte filter Egenskap.

Gråskalexempel

Ändra alla bilders färger till svart och vitt (100% grått):

Tulip
Original bild
Tulip
Gråskala (100%)
img {
    -webkit-filter: gråskala (100%); /* Safari 6.0 - 9.0 */
    filter: gråskala (100%);
}

Prova själv

Suddgöringsexempel

Tillämpa suddgöring till alla bilder:

Tulip
Original bild
Tulip
Suddgöring (5 pixlar)
img {
  -webkit-filter: suddgör (5px); /* Safari 6.0 - 9.0 */
  filter: suddgör (5px);
}

Prova själv

Relaterade sidor

Referenshandbok:CSS filter egenskap