Propriété CSS filter

La propriété filter applique des effets visuels à un élément (image). La propriété filter a les valeurs suivantes:

none
blur
brightness
contrast
drop-shadow
grayscale
hue-rotate
invert
opacity
saturate
sepia
url

Valeur initiale	none
Appliquée à	Éléments de cellules du tableau.
Héritée	Non.
Animable	Oui.
Version	CSS3
Syntaxe DOM	object.style.WebkitFilter = "hue-rotate(360deg)";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      img {
      -webkit-filter: blur(3px); /* Safari 6.0 - 9.0 */
      filter: blur(3px);
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété filter</h2>
    <p>Pour cet image, le filtre est défini à "blur(3px)".</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image">
    </p>
  </body>
</html>

Essayez-vous-même!

Faisons l'image plus lumineuse dans l'exemple suivant:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      img {
      -webkit-filter: brightness(120%);/* Safari 6.0 - 9.0 */
      filter: brightness(150%);
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété filter</h2>
    <p>Pour cet image, le filtre est défini à "brightness(150%)".</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image"> 
    </p>
  </body>
</html>

Essayez-vous-même!

Dans les exemples suivants, la valeur "greyscale" fait l'image gris:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      img {
      -webkit-filter: grayscale(80%);/* Safari 6.0 - 9.0 */
      filter: grayscale(80%);
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété filter</h2>
    <p>Pour cet image, le filtre est défini à "grayscale(80%)".</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image">
    </p>
  </body>
</html>

Essayez-vous-même!

Ici, le filtre "saturate" est appliqué à l'image, où la valeur donnée est 300%.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      img {
      -webkit-filter: saturate(300%);/* Safari 6.0 - 9.0 */
      filter: saturate(300%);
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété filter</h2>
    <p>Pour cet image, le filtre est défini à "saturate(300%)".</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image">
    </p>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
none	N'applique aucun effet. C'est la valeur initiale de cette propriété.
blur	Applique un flou gaussien à l'image. Elle est spécifiée par px. Plus la valeur est importante, plus le flou sera prononcé. Si on ne définit aucune valeur, la valeur utilisée par défaut est 0.
brightness	Fait l'image plus lumineuse. Si la valeur est 0, l'image sera noire. 100% est la valeur initiale qui montre l'image originelle. Il est possible d'utiliser des valeurs supérieures à 100% afin d'obtenir des images saturées en luminosité.
contrast	Ajuste le contraste de l'image. Si la valeur est 0, l'image sera noire. 100% est la valeur initiale qui montre l'image originelle. Il est possible d'utiliser des valeurs supérieures à 100% pour augmenter le contraste.
drop-shadow	Applique une ombre portée à l'image.
grayscale	L'image est convertie en niveau de gris. 0% est la valeur de l'image originelle. 100% fait l'image complètement gris. Les valeurs négatives ne sont pas autorisées.
hue-rotate	Applique une rotation de teinte à l'image. Elle est spécifiée par degrés. La valeur maximale est 360 degré.
invert	Inverse les couleurs de l'image. 0% est la valeur initiale. 100% fait l'image complètement inversée.
opacity	Définit le niveau de l'opacité de l'image. Elle décrit la transparence de l'image. Si l'image a la valeur 0%, elle est complètement transparente. 100% est l'état actuel de l'image.
saturate	Applique un effet de saturation à l'image. 0% fait l'image totalement désaturée. 100% est la valeur initiale de l'image. Les valeurs supérieures à 100% permet d'obtenir un effet de sursaturation.
sepia	L'image est convertie en sépia. La valeur initiale est 0%, 100% fait l'image totalement sépia.
url	La fonction url() prend comme argument l'emplacement d'un fichier XML qui définit le filtre SVG à appliquer. L'URL peut faire référence à une ancre d'un élément spécifique.
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.