Home > Article > Web Front-end > Can I change the color of an image using css?

Can I change the color of an image using css?

藏色散人Original: 2020-12-11 09:50:204802browse

css can change the color of the picture. The method to change the color of the picture: first create an HTML sample file; then change the color of the picture by setting the attribute of the picture to "img {filter: grayscale(10);}" That’s it.

The operating environment of this tutorial: windows7 system, css3 version, thinkpad t480 computer.

Recommended: "css video tutorial"

css can change the color of the picture.

The filter attribute defines the visual effect of the element (usually Can I change the color of an image using 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.

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.

Description: Multiple filters can be applied to an element by passing multiple filter functions to the filter attribute; the functions are space-separated.

Example 1: Use a grayscale filter to change a color image to a grayscale image

Original image:

Can I change the color of an image using css?

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>转换为灰度图像</title>
<style>
img {
filter: grayscale(10);
}
</style>
</head>
<body>
<img src="https://img.html.cn/upload/article/000/000/006/5d171d34606c9824.jpg" width="500px" height="250px" alt="filter applied" />
</body>
</body>
</html>

Rendering:

Can I change the color of an image using 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; 
            } 
            .image1 { 
                filter: invert(100%); 
            } 
            .image2 { 
                filter: sepia(100%);    
            }
</style>
</head>
<body>
<img src="https://img.html.cn/upload/article/000/000/006/5d171d34606c9824.jpg" class = "image1"  width="500px" height="250px" alt="filter applied" />
          
     <img src="https://img.html.cn/upload/article/000/000/006/5d171d34606c9824.jpg" class = "image2"  width="500px" height="250px" alt="filter applied" /> 
</body>
</body>
</html>

Rendering:

Can I change the color of an image using css?

The above is the detailed content of Can I change the color of an image using css?. For more information, please follow other related articles on the PHP Chinese website!

css css3 html xml 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：What to do if css3 sticky does not take effectNext article：What to do if css3 sticky does not take effect

See more

Can I change the color of an image using css?

Related articles