filtre CSS3 (filtre) propriétés
Exemples
Modifier toutes les couleurs à des images en noir et blanc (100% gris):
-webkit-filtre: niveaux de gris (100% ); / * Chrome, Safari, Opera * /
filtre: niveaux de gris (100%);
}
Essayez »
Définitions et utilisation
attribut de filtre définit les éléments (typiquement <img>) effets visuels (par exemple: Fuzzy et saturation).
| Par défaut: | aucun |
|---|---|
| Héritage: | aucun |
| le soutien de l'animation: | Oui. Les détails peuvent être trouvés dans CSS Animations |
| Version: | CSS3 |
| Syntaxe JavaScript: | objet .style.WebkitFilter = "niveauxdegris (100%)" pour essayer >> |
support du navigateur
Les chiffres du tableau représentent le premier navigateur pour soutenir le numéro de version de la méthode.
Immédiatement après le numéro pour le préfixe du navigateur spécifié.
| propriété | |||||
|---|---|---|---|---|---|
| filtre | 18,0 -webkit- | Ne supporte pas | 35,0 | 6.0 -webkit- | 15,0 -webkit- |
Remarque: Internet Explorer est le navigateur plus ancien (4,0 à 8,0) pour soutenir "filtre" non-standard propriété a été abandonnée. IE8 et les navigateurs antérieurs utilisent souvent l' opacité propriété.
Syntaxe CSS
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
Astuce: Utilisez des espaces pour séparer plusieurs filtres.
Fonction de filtre
Remarque: Les filtres utilisent généralement le pourcentage (par exemple: 75%), bien sûr, peut également être utilisé pour représenter une décimale (par exemple: 0,75).
| filtre | description |
|---|---|
| aucun | La valeur par défaut, aucun effet. |
| blur (px) | Flou gaussien aux paramètres de l'image. "Rayon" pour définir une valeur fonction gaussienne norme est pauvre, ou le nombre de pixels sur l'écran pour faire fondre ensemble, donc plus la valeur plus floue; Si la valeur est pas définie, la valeur par défaut est 0, ce paramètre peut être réglé valeur de longueur de css, mais ne pas accepter les valeurs de pourcentage. |
| luminosité (%) | Application d'une multiplication linéaire à l'image pour le faire paraître plus lumineux ou plus sombre. Si la valeur est de 0%, l'image est tout noir. La valeur 100%, aucune modification de l'image. Les autres valeurs correspondent à l'effet multiplicateur linéaire. Valeur de plus de 100% sont possibles, l'image sera plus claire que l'original. Si la valeur est pas définie, la valeur par défaut est 1. |
| contraste (%) | Réglez le contraste de l'image. La valeur est 0%, l'image est tout noir. La valeur est de 100%, l'image inchangée. Les valeurs peuvent dépasser 100%, ce qui signifie utilisera un contraste plus faible. Si la valeur est pas définie, la valeur par défaut est 1. |
| drop-shadow (h-ombre v -shadow flou propagation couleur) | Mettre en place un effet d'ombre à l'image. Les ombres sont synthétisées dans l'image ci-dessous, il peut y avoir ambiguïté, une couleur spécifique peut dessiner le masque de diagramme la version offset. Fonction accepte <ombre> valeur (définie dans l'arrière-plan de CSS3) type, en plus de "encadré" mot-clé est pas autorisé. La fonction de la propriété existante box-shadow box-shadow est très similaire, sauf que, à travers le filtre, certains navigateurs pour une meilleure performance fournit l'accélération matérielle.
|
| en niveaux de gris (%) | Convertir l'image en niveaux de gris. Elle définit la valeur du taux de conversion. Valeur de 100% est complètement converti en une image en niveaux de gris, une valeur de 0% de l'image inchangée. Les valeurs comprises entre 0% et 100%, l'effet multiplicateur est linéaire. Si non défini, la valeur par défaut est 0; |
| hue-rotation (deg) | Application à la rotation d'image de teinte. l'image "Angle" de l'angle d'anneau de couleur est une valeur ajustée de la valeur de consigne. Valeur 0deg, le changement d'image. Si la valeur est pas définie, la valeur par défaut est 0deg. Bien qu'il n'y ait pas de valeur maximale qui dépasse la valeur de l'équivalent d'un autre périmètre 360deg. |
| inverser (%) | Inversant image d'entrée. Elle définit la valeur du taux de conversion. 100% de la valeur est complètement inversée. Une valeur de 0%, l'image inchangée. Une valeur comprise entre 0% et 100%, l'effet multiplicateur est linéaire. Si la valeur est pas définie, la valeur par défaut est 0. |
| opacité (%) | degré de transparence de l'image de conversion. Elle définit la valeur du taux de conversion. 0% est totalement transparent, et une valeur de 100%, l'image inchangée. Une valeur comprise entre 0% et 100%, l'effet multiplicateur est linéaire, multiplié par le nombre d'échantillons est également équivalente à l'image. Si la valeur est pas définie, la valeur par défaut est 1. Cette fonction est très similaire à la propriété d'opacité existante, sauf que à travers le filtre, afin d'améliorer la performance de certains navigateurs fournira l'accélération matérielle. |
| saturer (%) | Convertit la saturation de l'image. Elle définit la valeur du taux de conversion. 0% est totalement insaturé, aucune modification de l'image est de 100%. Autre valeur, l'effet multiplicateur est linéaire. Plus de 100% de la valeur est autorisée, il existe une saturation plus élevée. Si la valeur est pas définie, la valeur par défaut est 1. |
| sépia (%) | Convertir l'image en sépia. Elle définit la valeur du taux de conversion. Valeur de 100% est entièrement brun foncé, est de 0% de l'image inchangée. Les valeurs comprises entre 0% et 100%, l'effet multiplicateur est linéaire. Si non défini, la valeur par défaut est 0; |
| url () | fonction URL prend un fichier XML qui définit un filtre SVG, et peut inclure une ancre pour spécifier un élément de filtre spécifique. Par exemple: filter: url(svg-url#element-id) |
| initial | La propriété est définie sur les valeurs par défaut, reportez - vous à: CSS Mot initial |
| hériter | Cette propriété est héritée de l'élément parent, vous pouvez voir: le CSS le mot - clé inherit |
D'autres exemples
exemples Fuzzy
Photos flou gaussien:
-webkit-filtre: blur (5px) ; / * Chrome, Safari, Opera * /
filtre: blur (5px);
}
Essayez »
Luminosité instance de fonction
Faire le plus lumineux de l'image:
-webkit-filtre: luminosité (200% ); / * Chrome, Safari, Opera * /
Filtre: luminosité (200%);
}
Essayez »
Contraste Instance de fonction
Réglez le contraste de l'image:
-webkit-filtre: contraste (200% ); / * Chrome, Safari, Opera * /
filtre: contraste (200%);
}
Essayez »
Des exemples de fonctions d'ombre portée
Mettre en place un effet d'ombre à l'image:
-webkit-filtre: drop-shadow ( 8px 8px 10px rouge); / * Chrome, Safari, Opera * /
filtre: drop-shadow (8px 8px 10px rouge);
}
Essayez »
Grayscale instance de fonction
Convertir l'image en niveaux de gris:
-webkit-filtre: niveaux de gris (50% ); / * Chrome, Safari, Opera * /
filtre: niveaux de gris (50%);
}
Essayez »
() Exemples de fonction teinte-rotation
Applications de rotation de teinte à l'image:
-webkit-filtre: hue-rotation ( 90deg); / * Chrome, Safari, Opera * /
filtre: hue-rotation (90deg) ;
}
Essayez »
Invert instance de fonction
Inversant image d'entrée:
-webkit-filtre: inverti (100% ); / * Chrome, Safari, Opera * /
Filtre: inverti (100%);
}
Essayez »
Opacité Instance de fonction
degré de transparence de l'image de conversion:
-webkit-filtre: opacité (30% ); / * Chrome, Safari, Opera * /
Filtre: opacité (30%);
}
Essayez »
Saturer Instance de fonction
Conversion de l'image Saturation:
-webkit-filtre: saturer (800% ); / * Chrome, Safari, Opera * /
filtre: saturer (800%);
}
Essayez »
Sépia instance de fonction
Convertir des images en sépia:
-webkit-filtre: sépia (100% ); / * Chrome, Safari, Opera * /
Filtre: sépia (100%);
}
Essayez »
fonction composite
L'utilisation de plusieurs filtres, chaque filtre séparés par des espaces.
Remarque: L'ordre est très important (par exemple, en utilisant en niveaux de gris () avant d' utiliser sépia () va produire une image complète de l' échelle de gris).
-webkit-filtre: contraste (200% ) de luminosité (150%); / * Chrome, Safari, Opera * /
filtre: contraste (200%) de luminosité (150%);
}
Essayez »
Tous les exemples de filtres
L'exemple suivant montre comment utiliser tout le filtre:
-webkit-filtre: blur (4px) ;
filtre: blur (4px);
}
.brightness {
-webkit-filtre: luminosité (0,30) ;
Filtre: luminosité (0,30);
}
.contrast {
-webkit-filtre: contraste (180% );
filtre: contraste (180%);
}
.grayscale {
-webkit-filtre: niveaux de gris (100% );
filtre: niveaux de gris (100%);
}
.huerotate {
-webkit-filtre: hue-rotation ( 180 °);
filtre: hue-rotation (180 °) ;
}
.invert {
-webkit-filtre: inverti (100% );
Filtre: inverti (100%);
}
.opacity {
-webkit-filtre: opacité (50% );
Filtre: opacité (50%);
}
.saturate {
-webkit-filtre: saturer (7) ;
filtre: saturer (7);
}
.sepia {
-webkit-filtre: sépia (100% );
Filtre: sépia (100%);
}
.shadow {
-webkit-filtre: drop-shadow ( 8px 8px 10px vert);
filtre: drop-shadow (8px 8px 10px vert);
}
Essayez »
articles connexes
HTML DOM Référence: attributs de style du filtre