100 ways to change the color of an image using CSS (worth collecting)

Preface

“When it comes to image processing, we often think of image processing tools such as PhotoShop. As front-end developers, we often need to process some special effects, such as making icons display different colors according to different states. Or when hovering, we need to process the contrast and shadow of the image.”

Do you think these are processed by PS software? No, no, no, it is written purely in CSS, it's magical.

Powerful CSS:filter

CSS filters provide graphic effects, like blurring, sharpening, or changing the color of an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders. MDN

The CSS standard includes some functions that implement predefined effects.

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

filter: none

No effect, the default filter is none

filter:blur() Gaussian blur

Give the image a Gaussian blur effect. The larger the length value, the blurrier the image.

Let’s try it

img 
{    
filter:blur(2px);
} 

brightness(%) linear multiplication

Can make the image look brighter or darker

img {
filter:brightness(70%);
} 

contrast(%)

Adjusts the contrast of the image.

img 
{    
filter:contrast(50%);
} 

drop-shadow(h-shadow v-shadow blur spread color)

Set a shadow effect to the image. Shadows are composited underneath the image, can be blurred, and are offset versions of a mask that can be painted in a specific color. The function accepts values ​​of type <shadow> (defined in CSS3 background), except that the "inset" keyword is not allowed. This function is very similar to the existing box-shadow box-shadow property; the difference is that through the filter, some browsers will provide hardware acceleration for better performance

Using this solution, we actually change the color of some icons, such as changing a black icon to a blue icon.

CSS arbitrary coloring technology for small icons in PNG format

img 
{    
filter: drop-shadow(705px 0 0 #ccc);
}

Here, we project the image to form a gray area of ​​equal size.

hue-rotate(deg) hue rotation

img {    
filter:hue-rotate(70deg);
}

Look, my little sister has become an Avatar!

invert(%) invert

This function is used to invert the input image, which is a bit like the effect of exposure.

img 
{   
 filter:invert(100%)
} 

grayscale(%) Converts the image to grayscale

This effect can make the picture look old and have a sense of vicissitudes of time. People who like ancient style will definitely like this effect

img 
{    
filter:grayscale(80%);
} 

In addition to the ancient style, there is another usage where you need to turn the entire site gray, such as on the Holocaust Memorial Day.

You can set it like this

*{    
filter: grayscale(100%);   
 -webkit-filter: grayscale(100%);   
 -moz-filter: grayscale(100%);    
-ms-filter: grayscale(100%);   
 -o-filter: grayscale(100%);
}

sepia(%) Converts the image to sepia

Give my little sister a warm tone below.

img 
{   
 filter:sepia(50%)
} 

Did you notice that I didn’t write the url() method here?

Yes, because I want to put this content at the end, filter:url() is the ultimate way to change images with CSS filters. CSS:filter can import an svg filter as its own filter.

The ultimate color changing solution! filter:url();

Why is filter:url() the ultimate solution for changing the color of images? Please allow me to explain it slowly.

Let's first take a look at the working principle of PS. We all know that web pages have three primary colors: R (red), G (green), and B (blue). The common RGBA also includes an opicity value, and the opcity value is calculated based on the alpha channel. That is to say, every pixel we see on a web page is composed of four channels: red, blue, green, and alpha. Each channel is called a color palette. The 8-bit palette in PS means 2 to the eighth power of 256, which means that the value range of each channel is (0-255) – SVG Research Road (11) – filter: feColorMatrix

If we can change the value of each channel, can we perfectly get any color we want? In principle, we can use SVG filters like PS to get any image we want, not just color change. We can even generate an image out of thin air.

svg feColorMatrix is ​​great

<svg height="0" xmlns="http://www.w3.org/2000/svg">  
  <defs>        
<filter id="change">               
 <feColorMatrix type="matrix" values="               
 0 0 0 0 0.55               
 0 0 0 0 0.23                
 0 0 0 0 0                
 0 0 0 0 1" />     
   </filter>   
 </defs></svg>
<img src="https://note.youdao.com/yws/res/237/WEBRESOURCE7e77df2551fe1a1db1b9d91f4d518917" alt="">
img
 {   
 filter:url(#change);}

Through a single channel we can turn the image into a single color

<svg height="0" xmlns="http://www.w3.org/2000/svg">    
<defs>       
 <filter id="change">               
<feColorMatrix values="3 -1 -1 0 0 -1 3 -1 0 0 -1 -1 3 0 0 0 0 0 1 0" /> </filter>    
</defs>
</svg>

Through dual channels we can get some very cool PS effects

Of course, here, it is just an example. By configuring the values ​​in the matrix, we can configure the value of each pixel to display according to the rules we define.

Here we will explain in detail how the feColorMatrix matrix is ​​calculated.

Among them Rin Gi

n Bin a(alpha) is the RGB value of each pixel in the original image

Through matrix calculation, the Rout Gout Bout Aout obtained is the final RGBA value displayed.

Convert the image to monochrome. Take brown rgba(140,59,0,1) as an example.

According to the above formula, we can simplify some calculations. In the same row, only one channel value is set, and the other channels are 0.

It is not difficult to derive the matrix

0 0 0 0 Target value R0 0 0 0 Target value G0 0 0 0 Target value B0 0 0 0 1

According to the rules, we only need to calculate, 255/the color corresponding to the channel we want to display = the target value

The brown color we want, rgba (140,59,0,1), is converted to the color palette rgba as 140 59 0 255

The target value can be calculated

0 0 0 0 0.550 0 0 0 0.230 0 0 0 0 0 0 0 0 1

Multi-channel settings for cool effects

Just like the cool pictures formed by the dual channels we have seen before

Today we want to increase the saturation of the picture, how should we do it? First of all, of course, we should think about the cause of saturation, that is, the redder the red, the bluer the blue, and the greener the green. Based on this cause, our matrix can be written as follows. Seeing 3 and -1 appear in the matrix, you must be confused about where this comes from. The principle is actually very easy to understand. Let us assume that the RGB of a certain pixel is (200/255), (100/255), (50/255), and it should appear a bit dark orange. After matrix conversion, R becomes 200/255×3-100/255-50/255=1.76, G becomes 200/255x(-1)+100/255*3-50/255=0.2, and B becomes 200x(-1)+100x(-1)+50×3=-0.59. Therefore, the RGB conversion is: 200×1.76, 100×0.2, 50x-0.5. SVG Research Road (11) – filter:feColorMatrix

<svg height="0" xmlns="http://www.w3.org/2000/svg">    
<defs>       
 <filter id="change">             
  <feColorMatrix values="3 -1 -1 0 0 -1 3 -1 0 0 -1 -1 3 0 0           
            0 0 0 1 0" />       
 </filter>    
</defs>
</svg>

Other solutions

In addition to the feColorMatrix svg filter, there are many other ways to define filters, which can also be applied to images. Due to space limitations, I will not go into detail here.

Summary CSS3 provides the filter attribute, which makes it possible to achieve more cool special effects through front-end technology. Relying on SVG filters, we can achieve complex filter effects. Note that CSS: filter and IE filter are not the same concept. CSS: filter has different compatibility on different browsers. You need to pay attention to the browser compatibility when using it.

Summarize

The above are 100 ways to change the color of pictures using CSS that I introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!