Exemple
Changer la couleur d'une image en noir et blanc (100% grayscale) en (100% grayscale) de (100% grayscale) :
// Standard syntax
document.getElementById("myImg").style.filter
= "grayscale(100%)";
// Code for Chrome, Safari and Opera
document.getElementById("myImg").style.WebkitFilter = "grayscale(100%)";
Essayez vous - même » Définition et utilisation
La propriété filtre ajoute des effets visuels (like blur and saturation) le (like blur and saturation) la (like blur and saturation) aux images.
Support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
Les chiffres suivis par Webkit précisent la première version qui a travaillé avec un préfixe.
| Propriété | |||||
|---|---|---|---|---|---|
| filter | 18,0 Webkit | 13.0 | 35,0 | 6.0 Webkit | 15,0 Webkit |
Remarque: Chrome, Safari et Opera soutiennent une alternative, la propriété WebkitFilter.
Syntaxe
Retour la propriété de filtre:
object .style.filterDéfinissez la propriété du filtre:
object .style.filter="none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate()
| invert() | opacity() | saturate() | sepia()"
Fonctions de filtrage
Remarque: Les filtres qui utilisent des valeurs de pourcentage (ie 75%) -à- (ie 0.75) (ie 75%) , accepter aussi la valeur décimale (ie 0.75) .
| Filtre | La description |
|---|---|
| aucun | Indique aucun effet |
| blur( px ) | Applique un effet de flou à l'image. Une plus grande valeur va créer plus flou. Si aucune valeur est spécifiée, 0 est utilisé. |
| brightness( % ) | Permet de régler la luminosité de l'image. 0% fera l'image complètement noire. 100% (1) est défaut et représente l'image originale. Les valeurs supérieures à 100% fourniront des résultats plus lumineux. |
| contrast( % ) | Permet de régler le contraste de l'image. 0% fera l'image complètement noire. 100% (1) est défaut et représente l'image originale. Les valeurs supérieures à 100% fourniront des résultats avec moins de contraste. |
| goutte à l' shadow( h-shadow v-shadow blur spread color ) | Applique un effet d'ombre portée à l'image. Valeurs possibles: h-ombre - requis. Indique une valeur de pixel pour l'ombre horizontale. Les valeurs négatives placent l'ombre à la gauche de l'image. v-ombre - requis. Indique une valeur de pixel pour l'ombre verticale. Les valeurs négatives placent l'ombre au-dessus de l'image. flou - en option. Ceci est la troisième valeur, et doit être en pixels. Ajoute un effet de flou à l'ombre. Une plus grande valeur va 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). diffusion - en option. Ceci est la quatrième valeur, et doit être en pixels. Les valeurs positives provoqueront l'ombre d'élargir et grossissent, et les valeurs négatives provoqueront l'ombre à 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 prennent pas en charge cette longueur 4; il ne sera pas rendu si ajouté. Couleur: en option. Ajoute une couleur à l'ombre. Si non spécifié, la couleur dépend du navigateur (often black) . Astuce: Ce filtre est similaire à la boîte ombre propriété. |
| 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. |
| Hué 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. Note: La valeur maximale est 360deg. |
| invert( % ) | Les échantillons dans Invertit 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. |
| opacity( % ) | Définit le niveau d'opacité de l'image. Le niveau d'opacité décrit le niveau de transparence, où: 0% est totalement transparent. 100% (1) est défaut et représente l'image d' origine (no transparency) . Remarque: Les valeurs négatives ne sont pas autorisés. Astuce: Ce filtre est similaire à l' opacité propriété. |
| saturate( % ) | Sature l'image. 0% (0) fera l'image complètement non saturée. 100% par défaut et représente l'image originale. Les valeurs supérieures à 100% fournit des résultats sursaturée. Remarque: Les valeurs négatives ne sont pas autorisés. |
| 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. |
Détails techniques
| version CSS | CSS3 |
|---|
Pages associées
Référence CSS: filter property
<Style objet