Attribut filter CSS

Définition et utilisation

L'attribut filter définit les effets visuels de l'élément (généralement <img>) (comme le flou et la saturation).

Veuillez également consulter :

Tutoriel CSS :Images CSS

Manuel de référence HTML DOM :Attribut filter

Exemple

Passer toutes les images en noir et blanc (100% gris) :

img {
  filter: grayscale(100%);
}

Essayez-le vous-même

Astuce :Vous pouvez trouver plus d'exemples TIY en bas de la page.

Grammaire CSS

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

Astuce :Pour utiliser plusieurs filtres, séparez-les par des espaces (voir les exemples supplémentaires en bas de page).

Détails techniques

Valeur par défaut : none
Héritage : Non
Création d'animation : Supporté. Voir :Attributs liés aux animations.
Version : CSS3
Syntaxe JavaScript : object.style.filter="grayscale(100%)"

Fonction de filtre

Remarque :Utilisez des pourcentages en pourcentage (par exemple 75%) pour les filtres, et cette valeur est également acceptée en décimal (par exemple 0,75).

Filtre Description
none Valeur par défaut. Définit l'effet sans effet.
blur(px)

Appliquez un effet de flou à l'image. Une valeur plus grande produira un flou plus important.

Si une valeur spécifiée, utilisez 0.
brightness(%)

Ajustez la luminosité de l'image.

  • 0% rendra l'image complètement noire.
  • La valeur par défaut est de 100%, ce qui représente l'image originale.
  • Des valeurs supérieures à 100% fourniront des résultats plus lumineux.
contrast(%)

Ajustez la contraste de l'image.

  • 0% rendra l'image complètement noire.
  • La valeur par défaut est de 100%, ce qui représente l'image originale.
  • Des valeurs supérieures à 100% fourniront des résultats plus contrastés.
drop-shadow(h-shadow v-shadow blur spread color)

Appliquez un effet d'ombre à l'image.

Valeurs possibles :

  • h-shadow - obligatoire. Spécifiez la valeur en pixels de l'ombre horizontale. Une valeur négative placera l'ombre à gauche de l'image.
  • v-shadow - obligatoire. Spécifiez la valeur en pixels de l'ombre verticale. Une valeur négative placera l'ombre au-dessus de l'image.

blur - optionnel. C'est la troisième valeur, l'unité doit être en pixels. Ajoutez un effet de flou à l'ombre. Plus la valeur est grande, plus l'effet de flou est important (l'ombre deviendra plus grande et plus lumineuse). Les valeurs négatives ne sont pas autorisées. Si aucune valeur n'est spécifiée, elle utilisera 0 (les bords de l'ombre seront très nets).

spread - optionnel. C'est la quatrième valeur, l'unité doit être en pixels. Une valeur positive fait que l'ombre s'étend et grandit, une valeur négative fait que l'ombre se rétrécit. Si aucune valeur n'est spécifiée, elle utilisera 0 (l'ombre a la même taille que l'élément).

Remarque :Chrome, Safari et Opera, peut-être d'autres navigateurs, ne supportent pas la quatrième longueur ; si elle est ajoutée, elle ne sera pas affichée.

color - optionnel. Ajoutez une couleur à l'ombre. Si elle n'est pas spécifiée, la couleur dépend du navigateur (généralement noire).

Cet exemple crée une ombre rouge, avec une largeur et une hauteur de 8px, et une déformation de 10px :

filter: drop-shadow(8px 8px 10px red);

Astuce :Ce filtre est similaire à l'attribut box-shadow.
grayscale(%);

Convertir l'image en niveaux de gris.

  • 0% (0) est la valeur par défaut, représentant l'image originale.
  • 100% rendra l'image entièrement en nuances de gris (utilisé pour les images en noir et blanc).

Remarque :Les valeurs négatives ne sont pas autorisées.
hue-rotate(deg);

Appliquer une rotation de teinte sur l'image. Cette valeur définit les degrés du cercle chromatique. La valeur par défaut est 0deg, représentant l'image originale.

Remarque :La valeur maximale est 360deg.
invert(%);

Inverser les échantillons de l'image.

  • 0% (0) est la valeur par défaut, représentant l'image originale.
  • 100% rendra l'image entièrement inversée.

Remarque :Les valeurs négatives ne sont pas autorisées.
opacity(%);

Définir le niveau de transparence de l'image. Le niveau de transparence opacity-level décrit le niveau de transparence, où :

  • 0% est complètement transparent.
  • 100% (1) est la valeur par défaut, représentant l'image originale (opaque).

Remarque :Les valeurs négatives ne sont pas autorisées.

Astuce :Ce filtre est similaire à l'attribut opacity.
saturate(%);

Définir la saturation de l'image.

  • 0% (0) rendra l'image entièrement dé-saturée.
  • 100% est la valeur par défaut et représente l'image originale.
  • Les valeurs au-dessus de 100% fournissent des résultats sur-saturés.

Remarque :Les valeurs négatives ne sont pas autorisées.
sepia(%);

Convertir l'image en brun foncé.

  • 0% (0) est la valeur par défaut, représentant l'image originale.
  • 100% rendra l'image entièrement en brun foncé.

Remarque :Les valeurs négatives ne sont pas autorisées.
url();

La fonction url() accepte l'emplacement du fichier XML de filtrage SVG et peut inclure un point d'ancre vers un élément de filtre spécifique. Exemple :

filter: url(svg-url#element-id);
initial Réinitialiser cette propriété à sa valeur par défaut. Voir initial.
inherit Inheriter cette propriété de l'élément parent. Voir inherit.

Plus d'exemples

Exemple flou

Ajouter un effet flou à l'image :

img {
  filter: blur(5px);
}

Essayez-le vous-même

Exemple flou 2

Appliquer une image d'arrière-plan floue :

img.background {
  filter: blur(35px);
}

Essayez-le vous-même

Exemple de luminosité

Ajuster la luminosité de l'image :

img {
  filter: brightness(200%);
}

Essayez-le vous-même

Exemple de contraste

Ajuster la contraste de l'image :

img {
  filter: contrast(200%);
}

Essayez-le vous-même

Exemple d'ombre

Appliquer un effet d'ombre à l'image :

img {
  filter: drop-shadow(8px 8px 10px gray);
}

Essayez-le vous-même

Exemple de niveaux de gris

Convertir l'image en niveaux de gris :

img {
  filter: grayscale(50%);
}

Essayez-le vous-même

Exemple de rotation de teinte

Appliquer une rotation de teinte sur l'image :

img {
  filter: hue-rotate(90deg);
}

Essayez-le vous-même

Exemple d'inversion

Inverser les échantillons dans l'image :

img {
  filter: invert(100%);
}

Essayez-le vous-même

Exemple d'opacité

Définir le niveau d'opacité de l'image :

img {
  filter: opacity(30%);
}

Essayez-le vous-même

Exemple de saturation

Ajuster la saturation de l'image :

img {
  filter: saturate(800%);
}

Essayez-le vous-même

Exemple de brun-jaune

Convertir l'image en brun-jaune :

img {
  filter: sepia(100%);
}

Essayez-le vous-même

Utilisation de multiples filtres

Pour utiliser plusieurs filtres, séparez-les par des espaces. Notez que l'ordre est important (par exemple, utiliser grayscale() après sepia() produira une image entièrement grise) :

img {
  filter: contrast(200%) brightness(150%);
}

Essayez-le vous-même

Tous les filtres

Démontrer toutes les fonctions de filtre :

.blur {
  filter: blur(4px);
}
.brightness {
  filter: brightness(0.30);
}
.contrast {
  filter: contrast(180%);
}
.grayscale {
  filter: grayscale(100%);
}
.huerotate {
  filter: hue-rotate(180deg);
}
.invert {
  filter: invert(100%);
}
.opacity {
  filter: opacity(50%);
}
.saturate {
  filter: saturate(7);
}
.sepia {
  filter: sepia(100%);
}
.shadow {
  filter: drop-shadow(8px 8px 10px green);
}

Essayez-le vous-même

Compatibilité des navigateurs

Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge pleinement cette propriété.

Les nombres précédés de -webkit- représentent la première version utilisant le préfixe.

Chrome IE / Edge Firefox Safari Opera
53.0
18.0 -webkit-		 13.0 35.0 9.1
6.0 -webkit-		 40.0
15.0 -webkit-

Remarque :Les versions plus anciennes d'Internet Explorer (de 4.0 à 8.0) prennent en charge les attributs non standard "filter" obsolètes. Lorsque le support pour IE8 et les versions antérieures est nécessaire, il est principalement utilisé pour l'opacité.