Maison > Article > interface Web > Comment changer l'image en gris en utilisant le style CSS

Comment changer l'image en gris en utilisant le style CSS

青灯夜游original: 2022-01-20 14:43:5815669parcourir

En CSS, vous pouvez utiliser l'attribut filter pour changer l'image en gris. Cet attribut peut ajouter un effet de filtre à l'image. Il vous suffit d'ajouter le style "filtre : niveaux de gris (valeur de gris % );" élément pour changer l’image en gris. Définir sur gris.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

En CSS, vous pouvez utiliser l'attribut filter pour changer l'image en gris. L'attribut

filter définit l'effet visuel de l'élément (généralement Comment changer l'image en gris en utilisant le style CSS ), c'est-à-dire l'ajout d'effets de filtre à l'image, tels que le flou et la saturation.

Lorsque la valeur de l'attribut de filtre est en niveaux de gris (%), l'image peut être convertie en image en niveaux de gris. La valeur définit l'échelle de la conversion. Si la valeur est de 100 %, l'image est entièrement convertie en niveaux de gris, et si la valeur est de 0 %, l'image restera inchangée. Les valeurs comprises entre 0 % et 100 % sont des multiplicateurs linéaires de l'effet. Si elle n'est pas définie, la valeur par défaut est 0 ;

Exemple de code :

<!DOCTYPE html>
<html>
	<head>
		<style>
			.img1 {
				-webkit-filter: grayscale(100%);
				/* Chrome, Safari, Opera */
				filter: grayscale(50%);
			}
			.img2 {
				-webkit-filter: grayscale(100%);
				/* Chrome, Safari, Opera */
				filter: grayscale(70%);
			}
			.img3 {
				-webkit-filter: grayscale(100%);
				/* Chrome, Safari, Opera */
				filter: grayscale(100%);
			}
		</style>
	</head>
	<body>

		<p>设置图片的灰度:</p>

		<img  src="img/1.jpg"    style="max-width:90%" alt="Comment changer l'image en gris en utilisant le style CSS" >
		<img  class="img1" src="img/1.jpg"    style="max-width:90%" alt="Comment changer l'image en gris en utilisant le style CSS" >
		<img  class="img2" src="img/1.jpg"    style="max-width:90%" alt="Comment changer l'image en gris en utilisant le style CSS" >
		<img  class="img3" src="img/1.jpg"    style="max-width:90%" alt="Comment changer l'image en gris en utilisant le style CSS" >
	</body>
</html>

Comment changer limage en gris en utilisant le style CSS

(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment réduire la transparence de l'arrière-plan en CSSArticle suivant：Comment réduire la transparence de l'arrière-plan en CSS

Articles Liés

Voir plus