Home >Web Front-end >CSS Tutorial >How to change image color with css

How to change image color with css

青灯夜游Original: 2021-03-09 15:25:5916141browse

In CSS, you can use the filter attribute to change the color of the picture. For example: use "filter:grayscale(%);" to set the picture to black and white, "filter: sepia(%);" to set the picture to Sepia images etc. The filter property of CSS is mainly used to set the visual effects of images.

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

You can use the filter attribute in CSS to apply a Photoshop-like filter effect to the image to change the color of the image.

<!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">
			<img  src="img/1.jpg" class="img1"/ alt="How to change image color with css" >
			<img  src="img/1.jpg" class="img2"/ alt="How to change image color with css" >
			<img  src="img/1.jpg" class="img3"/ alt="How to change image color with css" >
			<img  src="img/1.jpg" class="img4"/ alt="How to change image color with css" >
		</div>
	</body>
</html>

Original picture:

How to change image color with css

##Use the filter attribute to change the color

How to change image color with css

[Recommended tutorial:

CSS video tutorial、html video tutorial】

CSS filter attribute

The filter attribute of CSS is mainly used to set the image Visual effect.

Syntax:

filter: none|blur()|brightness()|contrast()|drop-shadow()|grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();

Filter function

Note: Filters usually use percentages (such as: 75%), of course, they can also be expressed in decimals (such as: 0.75).

none: This is the default value and no effects apply.
brightness(): Set the brightness of the element. If the brightness is 0% it is completely black, if the brightness is 100% it is the same as the original brightness. Values greater than 100% result in brighter elements.
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.
contrast(): used to adjust the contrast of elements. 0% contrast means complete black elements, 100% contrast means original elements.
saturate(): used to set the saturation of the element. 0% saturation means the element is completely unsaturated, 100% saturation means the original image. Values greater than 100% of the results are supersaturated elements.
blur(): It applies a blur effect to an element. If no fuzzy value is specified, the default value is 0.
opacity(): It sets the opacity effect of the image. 0% opacity means the element is completely transparent, and if the opacity is 100%, it means the original image.
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.
drop-shadow(): It applies a shadow effect to the element. It accepts h-shadow, v-shadow, blur, spread and color as values.
url(): Accepts an XML file that sets an SVG filter and can contain an anchor to specify a specific filter element.

For more programming-related knowledge, please visit:

Programming Video! !

The above is the detailed content of How to change image color with css. 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

Previous article：How to set the upper and lower spacing in cssNext article：How to set the upper and lower spacing in css

See more

How to change image color with css

Related articles