How to change the color of png images with css-CSS Tutorial-php.cn

How to change the color of png images with css

青灯夜游

Release： 2023-01-05 16:10:41

Original

5571 people have browsed it

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.

How to change the color of png images with css

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>

Copy after login

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>

Copy after login

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!