Le meilleur didacticiel filtre CSS3 (filtre) propriétés en 2024, dans ce didacticiel, vous pouvez apprendre Définitions et utilisation,support du navigateur,Syntaxe CSS,Fonction de filtre,D'autres exemples,articles connexes,
Modifier toutes les couleurs à des images en noir et blanc (100% gris):
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 >> |
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é.
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
Astuce: Utilisez des espaces pour séparer plusieurs filtres.
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 |
Photos flou gaussien:
Faire le plus lumineux de l'image:
Réglez le contraste de l'image:
Mettre en place un effet d'ombre à l'image:
Convertir l'image en niveaux de gris:
Applications de rotation de teinte à l'image:
Inversant image d'entrée:
degré de transparence de l'image de conversion:
Conversion de l'image Saturation:
Convertir des images en sépia:
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).
L'exemple suivant montre comment utiliser tout le filtre:
HTML DOM Référence: attributs de style du filtre