Comment changer la couleur de l'image avec CSS-tutoriel CSS-php.cn

Comment changer la couleur de l'image avec CSS

青灯夜游

Libérer： 2023-01-03 09:28:42

original

16121 Les gens l'ont consulté

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.

Comment changer la couleur de l'image avec CSS

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>

Copier après la connexion

Image originale :

Comment changer la couleur de limage avec CSS

Utilisez l'attribut de filtre pour changer la couleur

Comment changer la couleur de limage avec CSS

[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();

Copier après la connexion

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.