Hoe - Afbeeldingseffecten toevoegen
Leer hoe u visuele effecten aan afbeeldingen kunt toevoegen.
Afbeeldingsfilters
CSS-filters
De CSS- filter
eigenschap voegt visuele effecten (zoals vervaging en verzadiging) toe aan een element.
Opmerking: de filtereigenschap wordt niet ondersteund in Internet Explorer, Edge 12 of Safari 5.1 en eerder.
Voorbeeld grijswaarden
Verander de kleur van alle afbeeldingen in zwart-wit (100% grijs):
img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
Original image
grayscale(100%)
Voorbeeld vervagen
Een vervagingseffect toepassen op alle afbeeldingen:
img {
-webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
filter: blur(5px);
}
Original image
blur(5px)
Ga naar onze CSS-filterproperty voor meer informatie over CSS-filters.