Comment créer : Ajouter des effets d'image

Apprendre à ajouter des effets visuels aux images.

Filtres d'image

Essayer par vous-même

Filtres CSS

CSS filter La propriété ajoute des effets visuels aux éléments (comme le flou et la saturation).

Attention :Internet Explorer, Edge 12 ou Safari 5.1 et versions antérieures ne prennent pas en charge filter propriété.

Exemple de niveau de gris

Changer la couleur de toutes les images en noir et blanc (100% de gris) :

Tulip
image originale
Tulip
Niveau de gris (100%)
img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

Essayer par vous-même

Exemple de flou

Appliquer un effet de flou à toutes les images :

Tulip
image originale
Tulip
traitement de flou (5 pixels)
img {
  -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
  filter: blur(5px);
}

Essayer par vous-même

Pages connexes

Manuel de référence :Propriété CSS filter