Maison > Article > interface Web > Comment changer la couleur de l'image avec CSS
Comment changer la couleur de l'image avec CSS
- 青灯夜游original
- 2021-03-09 15:25:5916091parcourir
En CSS, vous pouvez utiliser l'attribut filter pour changer la couleur de l'image. Par exemple : utilisez "filter:grayscale(%);" pour définir l'image en noir et blanc, "filter: sepia( %);" pour définir l'image sur des images sépia, etc. La propriété filter de CSS est principalement utilisée pour définir les effets visuels des images.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
Vous pouvez utiliser l'attribut filter en CSS pour appliquer un effet de filtre de type Photoshop à l'image afin de changer la couleur de l'image.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
img{
width: 300px;
}
.img1{
/*元素的灰度*/
/*考虑浏览器兼容性：兼容Chrome,Safari,Opera*/
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.img2{
/*将图像转换为棕褐色图像*/
/*考虑浏览器兼容性：兼容Chrome,Safari,Opera*/
-webkit-filter: sepia(100%);
filter: sepia(100%);
}
.img3{
/*色调旋转*/
/*考虑浏览器兼容性：兼容Chrome,Safari,Opera*/
-webkit-filter:hue-rotate(55deg);
filter: hue-rotate(55deg);
}
.img4{
/*反转元素*/
/*考虑浏览器兼容性：兼容Chrome,Safari,Opera*/
-webkit-filter: invert(100%);
filter: invert(100%);
}
</style>
</head>
<body>
<div class="demo">
<img src="img/1.jpg" class="img1"/ alt="Comment changer la couleur de l'image avec CSS" >
<img src="img/1.jpg" class="img2"/ alt="Comment changer la couleur de l'image avec CSS" >
<img src="img/1.jpg" class="img3"/ alt="Comment changer la couleur de l'image avec CSS" >
<img src="img/1.jpg" class="img4"/ alt="Comment changer la couleur de l'image avec CSS" >
</div>
</body>
</html>Image originale :
Utilisez l'attribut de filtre pour changer la couleur
[Recommandé tutoriel :Tutoriel vidéo CSS, Tutoriel vidéo HTML]
Attribut de filtre CSS
L'attribut de filtre de CSS est principalement utilisé pour définir les effets visuels de l’image.
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 h-shadow, v-shadow, Blur, Spread et Color comme valeurs.
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.
Pour plus de connaissances liées à la programmation, veuillez visiter : Vidéo de programmation ! !
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!