Hoe te maken: voeg afbeeldingseffecten toe

Leer hoe je visuele effecten toevoegt aan afbeeldingen.

Afbeeldingsfilters

Try it yourself

CSS Filters

CSS filter De eigenschap voegt visuele effecten toe aan elementen (zoals verwering en verzadiging).

Opmerking:Internet Explorer, Edge 12 of Safari 5.1 en oudere versies ondersteunen dit niet filter Eigenschap.

Grijswaardenvoorbeeld

Verander de kleur van alle afbeeldingen in zwart-wit (100% grijs):

Tulip
Oorspronkelijke afbeelding
Tulip
Grijswaarden (100%)
img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

Try it yourself

Vermengingsvoorbeeld

Werk een verduisteringseffect toe aan alle afbeeldingen:

Tulip
Oorspronkelijke afbeelding
Tulip
Vermengeling (5 pixels)
img {
  -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
  filter: blur(5px);
}

Try it yourself

Related pages

Reference manual:CSS filter attribute