Maison > Article > interface Web > Puis-je changer la couleur d’une image en utilisant CSS ?
Puis-je changer la couleur d’une image en utilisant CSS ?
- 藏色散人original
- 2020-12-11 09:50:204774parcourir
CSS peut changer la couleur des images. La méthode pour changer la couleur des images est la suivante : créez d'abord un exemple de fichier HTML ; puis changez la couleur de l'image en définissant l'attribut de l'image sur "img {filter". : grayscale(10);}" C'est tout.
L'environnement d'exploitation de ce tutoriel : système windows7, version css3, ordinateur thinkpad t480.
Recommandé : "Tutoriel vidéo CSS"
Les CSS peuvent changer la couleur des images. L'attribut
filter définit l'effet visuel de l'élément (généralement ). Cet attribut est principalement utilisé pour le contenu de l'image.
Cet attribut est une méthode CSS permettant d'appliquer des effets de filtre aux éléments (principalement des images) d'une page Web.
Syntaxe :
filter: none|blur()|brightness()|contrast()|drop-shadow()|grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();
Fonction de filtre
Remarque : Les filtres utilisent généralement des pourcentages (tels que : 75%), bien sûr, ils peuvent également être exprimés en décimales (tels que : 0,75).
aucun : il s'agit de la valeur par défaut et aucun effet n'est appliqué.
brightness() : Définissez la luminosité de l'élément. Si la luminosité est de 0%, c'est complètement noir, si la luminosité est de 100%, c'est la même que la luminosité d'origine. Les valeurs supérieures à 100 % donnent des éléments plus brillants.
grayscale() : définit l'échelle de gris de l'élément, qui convertit la couleur de l'élément en noir et blanc. Les niveaux de gris 0 % représentent l'élément d'origine et 100 % représentent l'élément entièrement en niveaux de gris.
sepia() : Il convertit l'image en une image sépia, où 0 % signifie l'image originale et 100 % signifie un sépia complet.
contrast() : utilisé pour ajuster le contraste des éléments. Un contraste de 0 % représente des éléments noirs complets, un contraste de 100 % représente des éléments originaux.
saturate() : utilisé pour définir la saturation d'un élément. 0 % de saturation signifie que l'élément est complètement insaturé, 100 % de saturation signifie l'image originale. Les valeurs supérieures à 100 % des résultats sont des éléments sursaturés.
blur() : Il applique un effet de flou à un élément. Si aucune valeur floue n'est spécifiée, la valeur par défaut est 0.
opacity() : Il définit l'effet d'opacité de l'image. Une opacité de 0 % signifie que l'élément est complètement transparent, et si l'opacité est de 100 %, cela signifie l'image originale.
hue-rotate() : Il applique une rotation de teinte à l'image. Cette valeur définit le degré autour duquel le cercle chromatique de l’échantillon d’image sera ajusté. La valeur par défaut est 0deg, qui représente l'image originale ; bien que cette valeur n'ait pas de valeur maximale, une valeur supérieure à 360deg équivaut à faire un nouveau tour.
invert() : Il inverse les éléments. La valeur par défaut est 0 %, qui représente l'image originale. 100 % rend l'image complètement inversée.
drop-shadow() : Il applique un effet d'ombre à l'élément. Il accepte les valeurs h-shadow, v-shadow, Blur, Spread et Color.
url() : accepte un fichier XML qui définit un filtre SVG et peut contenir une ancre pour spécifier un élément de filtre spécifique.
Description : Plusieurs filtres peuvent être appliqués à un élément en passant plusieurs fonctions de filtre à l'attribut de filtre ; les fonctions sont séparées par des espaces.
Exemple 1 : utilisez un filtre en niveaux de gris pour changer l'image couleur en image en niveaux de gris
Image originale :
Code :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>转换为灰度图像</title>
<style>
img {
filter: grayscale(10);
}
</style>
</head>
<body>
<img src="https://img.html.cn/upload/article/000/000/006/5d171d34606c9824.jpg" width="500px" height="250px" alt="filter applied" />
</body>
</body>
</html>Rendu :
Exemple 2 : Cet exemple utilise de nombreux filtres sur l'image.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>将图像转换为不同的颜色</title>
<style>
img {
float:left;
}
.image1 {
filter: invert(100%);
}
.image2 {
filter: sepia(100%);
}
</style>
</head>
<body>
<img src="https://img.html.cn/upload/article/000/000/006/5d171d34606c9824.jpg" class = "image1" width="500px" height="250px" alt="filter applied" />
<img src="https://img.html.cn/upload/article/000/000/006/5d171d34606c9824.jpg" class = "image2" width="500px" height="250px" alt="filter applied" />
</body>
</body>
</html>Rendu :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!