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>

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>

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>

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>

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.

Support de Navigateurs

53.0
18.0 -webkit-
12.0
-webkit-
35.0
+ 49.0 -webkit-
6.0
-webkit-
40.0
+ 15.0 -webkit-


Trouvez-vous cela utile?

Articles Associées