Propriété Style filter

Définition et utilisation

filter Ajouter des effets visuels aux images (comme le flou et la saturation).

Voir également :

Guide CSS :Propriété filter

Exemple

Changer la couleur de l'image en noir et blanc (100% de gris) :

document.getElementById("myImg").style.filter = "grayscale(100%)";

Essayez-le vous-même

Syntaxe

Retourner la propriété filter :

object.style.filter

Définir la propriété filter :

object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"

Fonction Filter

Remarque :Le filtre utilisé avec une valeur en pourcentage (comme 75%) accepte également des valeurs décimales (c'est-à-dire 0,75).

Filtre Description
none Définir sans effet.
blur(px)

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

Si la valeur n'est pas spécifiée, elle utilisera 0.
brightness(%)

Ajuster la luminosité de l'image.

0% rendra l'image entièrement noire.

100% (1) est la valeur par défaut, ce qui représente l'image originale.

Les valeurs au-delà de 100% fourniront des résultats plus lumineux.
contrast(%)

Ajuster la contraste de l'image.

0% rendra l'image entièrement noire.

100% (1) est la valeur par défaut, ce qui représente l'image originale.

Les valeurs au-delà de 100% fourniront des résultats avec une contraste inférieur.
drop-shadow(h-shadow v-shadow blur spread color)

Appliquer un effet de projection sur 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. Troisième valeur, en pixels. Ajouter un effet de flou à l'ombre. Les valeurs plus grandes produisent un flou plus important (l'ombre devient plus grande et plus lumineuse). Les valeurs négatives ne sont pas autorisées. Si la valeur n'est pas spécifiée, elle sera de 0 (les bords de l'ombre seront nets).

spread - optionnel. Quatrième valeur, en pixels. Une valeur positive entraînera l'agrandissement et l'élargissement de l'ombre, tandis qu'une valeur négative entraînera le rétrécissement de l'ombre. Si non spécifié, il sera de 0 (l'ombre sera de la même taille que l'élément).

Remarque :Chrome, Safari et Opera, ainsi que d'autres navigateurs, ne prennent pas en charge la quatrième longueur ; si elle est ajoutée, elle ne sera pas affichée.

color: optionnel. Ajouter une couleur à l'ombre. Si non spécifié, la couleur dépend du navigateur (généralement noire).

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

Convertir l'image en nuances de gris.

0% (0) est la valeur par défaut, ce qui représente l'image originale.

100% rendra l'image entièrement grise (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 autour du cercle des couleurs auxquels les échantillons d'image seront ajustés.

0deg est la valeur par défaut, ce qui représente l'image originale.

Remarque :La valeur maximale est de 360 degrés.
invert(%)

Inverser les échantillons de l'image.

0% (0) est la valeur par défaut, ce qui représente 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 d'opacité de l'image. Le niveau d'opacité décrit le niveau de transparence, où :

0% est complètement transparent.

100% (1) est la valeur par défaut, ce qui représente l'image originale (sans transparence).

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

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

Ajuster la saturation de l'image.

0% (0) rendra l'image entièrement désaturée.

100% est la valeur par défaut, ce qui représente l'image originale.

Les valeurs au-delà de 100% fourniront des résultats sur饱和.

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

Convertir l'image en brun et doré.

0% (0) est la valeur par défaut, ce qui représente l'image originale.

100% rend les images entièrement brunes et dorées.

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

Détails techniques

Version CSS : CSS3

Support du navigateur

Les numéros dans le tableau indiquent la version du navigateur qui prend en charge cette propriété pour la première fois.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
53.0 13.0 35.0 9.1 40.0