How to change color pictures to black and white pictures in css3-CSS Tutorial-php.cn

How to change color pictures to black and white pictures in css3

青灯夜游

Release： 2021-11-09 15:55:42

Original

2552 people have browsed it

In CSS3, you can use the filter attribute to change color images to black and white images. You only need to set the value of this attribute to "grayscale(%)". The specific syntax format is "img{filter:grayscale (100%)}".

How to change color pictures to black and white pictures in css3

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

In CSS3, you can use the filter attribute to change color images to black and white images. You only need to set the value of this attribute to "grayscale(%)",

The filter attribute defines the visual effect (for example: blur, saturation, grayscale) of the element (usually How to change color pictures to black and white pictures in css3 ).

grayscale(%) : Convert the image to grayscale. The value defines the scale of the conversion. If the value is 100%, the image will be completely converted to grayscale, and if the value is 0%, the image will remain unchanged. Values between 0% and 100% are linear multipliers of the effect. If not set, the value defaults to 0.

Example:

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

	<body>
		<img  src="img/1.jpg"    style="max-width:90%" / alt="How to change color pictures to black and white pictures in css3" >
		<img  src="img/1.jpg"    style="max-width:90%" class="img"/ alt="How to change color pictures to black and white pictures in css3" >
	</body>
</html>

Copy after login

Rendering:

How to change color pictures to black and white pictures in css3

(Learning video sharing: css video tutorial)

The above is the detailed content of How to change color pictures to black and white pictures in css3. For more information, please follow other related articles on the PHP Chinese website!