Home >Web Front-end >CSS Tutorial >How to change color pictures to black and white pictures in css3

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

青灯夜游
青灯夜游Original
2021-11-09 15:53:002624browse

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>

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn