Maison > Article > interface Web > Comment changer les images couleur en images noir et blanc en CSS3

Comment changer les images couleur en images noir et blanc en CSS3

青灯夜游original: 2021-11-09 15:53:002531parcourir

En CSS3, vous pouvez utiliser l'attribut filter pour changer les images en couleur en images en noir et blanc. Il vous suffit de définir la valeur de cet attribut sur "grayscale(%)". (100%)}".

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

En CSS3, vous pouvez utiliser l'attribut filter pour transformer les images couleur en images noir et blanc. Il vous suffit de définir la valeur de cet attribut sur l'attribut "grayscale(%)". est défini L'effet visuel (par exemple flou, saturation, niveaux de gris) de l'élément (généralement Comment changer les images couleur en images noir et blanc en CSS3 ).

grayscale(%) : Convertit l'image en niveaux de gris. La valeur définit l'échelle de la conversion. Si la valeur est de 100 %, l'image sera 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. filter 属性定义了元素(通常是 Comment changer les images couleur en images noir et blanc en CSS3 )的可视效果(例如：模糊、饱和度、灰度)。

grayscale(%)

Exemple :

<!DOCTYPE html>
<html>
	<head>
		<style>
			.img{filter:grayscale(100%)}
		</style>
	</head>

	<body>
		<img  src="img/1.jpg"    style="max-width:90%" / alt="Comment changer les images couleur en images noir et blanc en CSS3" >
		<img  src="img/1.jpg"    style="max-width:90%" class="img"/ alt="Comment changer les images couleur en images noir et blanc en CSS3" >
	</body>
</html>

Rendu :

Comment changer les images couleur en images noir et blanc en CSS3

(Partage vidéo 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!

html5 css css3 Filter

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 définir la hauteur maximale de div en CSSArticle suivant：Comment définir la hauteur maximale de div en CSS

Articles Liés

Voir plus