Exemple
Changer la couleur de toutes les images en noir et blanc (100% gray) de (100% gray) :
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari,
Opera */
filter: grayscale(100%);
}
Original image
grayscale(100%)
Astuce: Plus "Try it Yourself" exemples ci - dessous.
Définition et utilisation
La propriété de filtre définit des effets visuels (like blur and saturation) le (often <img>) (like blur and saturation) la (like blur and saturation) à un élément (often <img>) .
| Valeur par défaut: | aucun |
|---|---|
| Hérité: | no |
| Animable: | yes. Read about animatable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object .style.WebkitFilter="grayscale(100%)" Try it |
support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
Numbers suivis par -webkit- spécifient la première version qui a travaillé avec un préfixe.
| Propriété | |||||
|---|---|---|---|---|---|
| filter | 18,0 -webkit- | 13,0 | 35,0 | 9.1 6.0 -webkit- | 15,0 -webkit- |
Remarque: Les anciennes versions d'Internet Explorer (4.0 to 8.0) en faveur d' un non-standard "filter" propriété qui a été désapprouvée. Cela a été principalement utilisé pour l' opacité en cas de besoin le soutien de IE8 et vers le bas.
Syntaxe CSS
filter:
none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate()
| invert() | opacity() | saturate() | sepia() | url();Astuce: Pour utiliser plusieurs filtres, séparer chaque filtre avec un espace (See "More Examples" below) - (See "More Examples" below) .
Fonctions de filtrage
Remarque: Les filtres qui utilisent des valeurs de pourcentage (ie 75%) , accepter aussi la valeur en décimal (ie 0.75) .
| Filtre | La description | Joue-le |
|---|---|---|
| none | Valeur par défaut. Indique pas d'effets | Joue-le " |
| blur( px ) | Applique un effet de flou à l'image. Une plus grande valeur permettra de créer plus flou. Si aucune valeur est spécifiée, 0 est utilisé. | Joue-le " |
| brightness( % ) | Permet de régler la luminosité de l'image. 0% fera l'image complètement noire. 100% (1) est par défaut et représente l'image originale. Les valeurs supérieures à 100% fourniront des résultats plus brillants. | Joue-le " |
| contrast( % ) | Ajuste le contraste de l'image. 0% fera l'image complètement noire. 100% (1) est par défaut et représente l'image originale. Les valeurs supérieures à 100% fourniront des résultats avec moins de contraste. | Joue-le " |
| drop-shadow( h-shadow v-shadow blur spread color ) | Applique un effet d'ombre portée à l'image. Valeurs possibles: h-ombre - Obligatoire. Indique une valeur de pixel pour l'ombre horizontale. Les valeurs négatives placent l'ombre à la gauche de l'image. v-shadow - Obligatoire. Indique une valeur de pixel pour l'ombre verticale. Les valeurs négatives placent l'ombre au-dessus de l'image. flou - facultatif. Ceci est la troisième valeur, et doit être en pixels. Ajoute un effet de flou à l'ombre. Une plus grande valeur permettra de créer plus flou (l'ombre devient plus grand et plus léger). Les valeurs négatives ne sont pas autorisés. Si aucune valeur est spécifiée, 0 est utilisé (bord de l'ombre est forte). propagation - facultatif. Ceci est la quatrième valeur, et doit être en pixels. Les valeurs positives vont provoquer l'ombre d'élargir et de grossir, et les valeurs négatives provoqueront l'ombre à se rétrécir. Si non spécifié, il sera 0 (the shadow will be the same size as the element) . Remarque: Chrome, Safari et Opera, et peut - être d' autres navigateurs, ne supportent pas cette 4ème longueur; il ne sera pas rendu si ajouté. couleur - facultatif. Ajoute une couleur à l'ombre. Si non spécifié, la couleur dépend du navigateur (often black) . Un exemple de créer une ombre rouge, qui est 8px grand à la fois horizontalement et verticalement, avec un effet de flou de 10px: filtre: drop-shadow (8px 8px 10px rouge); Astuce: Ce filtre est similaire à la box-shadow propriété. | Joue-le " |
| grayscale( % ) | Convertit l'image en niveaux de gris. 0% (0) est par défaut et représente l'image originale. 100% fera l'image complètement gris (used for black and white images) les (used for black and white images) en (used for black and white images) . Remarque: Les valeurs négatives ne sont pas autorisés. | Joue-le " |
| hue-rotate( deg ) | Applique une rotation de teinte sur l'image. La valeur définit le nombre de degrés autour du cercle de couleur des échantillons d'image seront ajustés. 0deg est par défaut, et représente l'image originale. Remarque: la valeur maximale est 360deg. | Joue-le " |
| invert( % ) | Inverse les échantillons dans l'image. 0% (0) est par défaut et représente l'image originale. 100% fera l'image complètement inversée. Remarque: Les valeurs négatives ne sont pas autorisés. | Joue-le " |
| opacity( % ) | Définit le niveau d'opacité de l'image. Le niveau d'opacité décrit le niveau de transparence-the, où: 0% est totalement transparent. 100% (1) est par défaut et représente l'image originale (no transparency) . Remarque: Les valeurs négatives ne sont pas autorisés. Astuce: Ce filtre est similaire à l' opacité propriété. | Joue-le " |
| saturate( % ) | Saturés l'image. 0% (0) fera l'image complètement non-saturé. 100% par défaut et représente l'image originale. Les valeurs supérieures à 100% fournit des résultats super-saturée. Remarque: Les valeurs négatives ne sont pas autorisés. | Joue-le " |
| sepia( % ) | Convertit l'image en sépia. 0% (0) est par défaut et représente l'image originale. 100% fera l'image complètement sépia. Remarque: Les valeurs négatives ne sont pas autorisés. | Joue-le " |
| url() | L' url() fonction prend l'emplacement d'un fichier XML qui spécifie un filtre SVG, et peut inclure un point d' ancrage à un élément de filtre spécifique. Exemple: filtre: url(svg-url#element-id) | |
| initial | Définit cette propriété à sa valeur par défaut. Lisez à propos initial | |
| inherit | Hérite cette propriété de son élément parent. Lisez à propos de hériteront |
Autres exemples
Blur Exemple
Appliquer un effet de flou à l'image:
img {
-webkit-filter: blur(5px); /* Chrome, Safari,
Opera */
filter: blur(5px);
}
Original image
blur(5px)
Luminosité Exemple
Réglez la luminosité de l'image:
img {
-webkit-filter: brightness(200%); /* Chrome, Safari,
Opera */
filter: brightness(200%);
}
Original image
brightness(200%)
contraste Exemple
Réglez le contraste de l'image:
img {
-webkit-filter: contrast(200%); /* Chrome, Safari,
Opera */
filter: contrast(200%);
}
Original image
contrast(200%)
Ombre Exemple
Appliquer un effet d'ombre portée à l'image:
img {
-webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari,
Opera */
filter: drop-shadow(8px 8px 10px red);
}
Original image
drop-shadow(8px 8px 10px red)
Grayscale Exemple
Convertir l'image en niveaux de gris:
img {
-webkit-filter: grayscale(50%); /* Chrome, Safari,
Opera */
filter: grayscale(50%);
}
Original image
grayscale(50%)
Hue Rotation Exemple
Appliquer une rotation de teinte sur l'image:
img {
-webkit-filter: hue-rotate(90deg); /* Chrome, Safari,
Opera */
filter: hue-rotate(90deg);
}
Original image
hue-rotate(90deg)
Inverser l'exemple
Inversez les échantillons dans l'image:
img {
-webkit-filter: invert(100%); /* Chrome, Safari,
Opera */
filter: invert(100%);
}
Original image
invert(100%)
Opacité Exemple
Réglez le niveau d'opacité de l'image:
img {
-webkit-filter: opacity(30%); /* Chrome, Safari,
Opera */
filter: opacity(30%);
}
Original image
opacity(30%)
Saturer Exemple
Saturer l'image:
img {
-webkit-filter: saturate(800%); /* Chrome, Safari,
Opera */
filter: saturate(800%);
}
Original image
saturate(800%)
Sépia Exemple
Convertir l'image en sépia:
img {
-webkit-filter: sepia(100%); /* Chrome, Safari,
Opera */
filter: sepia(100%);
}
Original image
sepia(100%)
Filtres Combinant / Filtres multiples
Pour utiliser plusieurs filtres, séparer chaque filtre avec un espace.
Remarque: L' ordre est importante (ie using grayscale() par sepia() (ie using grayscale() en (ie using grayscale() en (ie using grayscale() de (ie using grayscale() après sepia() se traduira par une image complètement gris).
img {
-webkit-filter: contrast(200%) brightness(150%); /* Chrome, Safari,
Opera */
filter: contrast(200%) brightness(150%);
}
Original image
contrast(200%) brightness(150%)
Tous les filtres
Une démonstration de toutes les fonctions de filtrage:
.blur {
-webkit-filter: blur(4px);
filter: blur(4px);
}
.brightness {
-webkit-filter:
brightness(0.30);
filter: brightness(0.30);
}
.contrast {
-webkit-filter:
contrast(180%);
filter: contrast(180%);
}
.grayscale {
-webkit-filter:
grayscale(100%);
filter: grayscale(100%);
}
.huerotate {
-webkit-filter:
hue-rotate(180deg);
filter: hue-rotate(180deg);
}
.invert {
-webkit-filter:
invert(100%);
filter: invert(100%);
}
.opacity {
-webkit-filter:
opacity(50%);
filter: opacity(50%);
}
.saturate {
-webkit-filter:
saturate(7);
filter: saturate(7);
}
.sepia {
-webkit-filter:
sepia(100%);
filter: sepia(100%);
}
.shadow {
-webkit-filter:
drop-shadow(8px 8px 10px green);
filter: drop-shadow(8px 8px 10px green);
} Essayez - le vous - même » Pages associées
Référence HTML DOM: filter property