CSSPropriété de filtre


Syntaxe

  • filtre: aucun (valeur par défaut)
  • filtre: initial (par défaut à aucun);
  • filter: inherit (par défaut à la valeur parente);
  • filtre: flou (px)
  • filtre: luminosité (nombre |%)
  • filtre: contraste (nombre |%)
  • filtre: ombre portée (ombre horizontale-ombre-px-ombre-px-ombre-blur-px-propagation de la couleur)
  • filtre: échelle de gris (nombre |%)
  • filtre: teinte-rotation (deg)
  • filtre: inverser (nombre |%)
  • filtre: opacité (nombre |%)
  • filtre: saturé (nombre |%)
  • filtre: sépia (nombre |%)

Paramètres

Valeur La description
flou (x) Floue l'image par x pixels.
luminosité (x) Éclaircit l'image à n'importe quelle valeur supérieure à 1,0 ou 100%. En dessous, l'image sera assombrie.
contraste (x) Fournit plus de contraste à l'image pour toute valeur supérieure à 1,0 ou 100%. En dessous, l'image sera moins saturée.
ombre portée (h, v, x, y, z) Donne à l'ombre une ombre portée. h et v peuvent avoir des valeurs négatives. x, y et z sont facultatifs.
échelle de gris (x) Affiche l'image en niveaux de gris, avec une valeur maximale de 1,0 ou 100%.
teinte rotation (x) Applique une teinte-rotation à l'image.
inverser (x) Inverse la couleur de l'image avec une valeur maximale de 1,0 ou 100%.
opacité (x) Définit l'opacité / la transparence de l'image avec une valeur maximale de 1,0 ou 100%.
saturer (x) Sature l'image à n'importe quelle valeur supérieure à 1,0 ou 100%. En dessous, l'image commence à se désaturer.
sépia (x) Convertit l'image en sépia avec une valeur maximale de 1,0 ou 100%.

Remarques

  1. Puisque filter est une fonctionnalité expérimentale, vous devez utiliser le préfixe -webkit. Cela peut changer dans la syntaxe et le comportement, mais les changements vont probablement être petits.

  2. Il peut ne pas être pris en charge dans les anciennes versions des principaux navigateurs. Il peut être entièrement non pris en charge dans les navigateurs mobiles.

  3. En raison de son support relativement limité, essayez d'utiliser box-shadow au lieu de filter: drop-shadow() . Utilisez l' opacity au lieu du filter: opacity() .

  4. Il peut être animé via Javascript / jQuery. Pour Javascript, utilisez object.style.WebkitFilter .

  5. Vérifiez W3Schools ou MDN pour plus d'informations.

  6. W3Schools a également une page de démonstration pour tous les différents types de valeurs de filtre.

Propriété de filtre Exemples Liés