Home > Article > Web Front-end > How to change the color of png images with css

How to change the color of png images with css

青灯夜游Original: 2021-04-22 19:12:115432browse

You can use the filter attribute in css with the invert(), grayscale(), sepia() or hue-rotate() functions to change the png color; hue-rotate() sets the hue rotation, and grayscale() adjusts the gray degree, sepia() sets the sepia image.

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

You can use the Filter attribute in CSS to use the filter function to change the color of the image; the Filter attribute of CSS is mainly used to set the visual effect of the image.

The filter attribute defines the visual effect of the element (usually How to change the color of png images with css ). This attribute is mainly used for image content.

This attribute is a CSS method that applies filter effects to elements (mainly images) on the web page.

Related attribute values:

grayscale(): Sets the grayscale of the element, which converts the element color to black and white. Grayscale 0% represents the original element, and 100% represents the completely grayscale element.
sepia(): It converts the image to a sepia image, where 0% means the original image and 100% means full sepia.
hue-rotate(): It applies hue rotation to the image. This value defines the degree around which the color circle of the image sample will be adjusted. The default value is 0deg, which represents the original image; although this value has no maximum value, a value exceeding 360deg is equivalent to going around again.
invert(): It inverts the elements. The default value is 0%, which represents the original image. 100% makes the image completely inverted.

Code example: Use the filter attribute to change the image color

<!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">原图：<br />
			<img  src="img/1.jpg" / alt="How to change the color of png images with css" >
			
		</div><br /><br />
		<div class="demo">应用滤镜，改变颜色后：<br />
			<img  src="img/1.jpg" class="img1" / alt="How to change the color of png images with css" >
			<img  src="img/1.jpg" class="img2" / alt="How to change the color of png images with css" >
			<img  src="img/1.jpg" class="img3" / alt="How to change the color of png images with css" >
			<img  src="img/1.jpg" class="img4" / alt="How to change the color of png images with css" >
		</div>
	</body>

</html>

Rendering:

How to change the color of png images with css

Example 2: This example uses many filters on the image

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>将图像转换为不同的颜色</title>
		<style>
			img {  
                float:left; 
            	-webkit-filter: invert(100%) sepia(100%);
                filter: invert(100%) sepia(100%);   
            }
		</style>
	</head>

	<body>
	 <img  src="img/1.jpg"    style="max-width:90%"/ alt="How to change the color of png images with css" >
	</body>
	</body>

</html>

Rendering:

How to change the color of png images with css

Description: Use multiple filters, each filter Use spaces to separate

(Learning video sharing: css video tutorial)

The above is the detailed content of How to change the color of png images with css. For more information, please follow other related articles on the PHP Chinese website!

html5 css css3 Filter

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

Previous article：How to set css character spacingNext article：How to set css character spacing

See more

How to change the color of png images with css

Related articles