Shulou(Shulou.com)06/01 Report--

In this article Xiaobian for you to introduce in detail "what are the ways to change the color of pictures with CSS", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "what are the ways to change the color of pictures with CSS?" the article can help you solve your doubts.

Preface

"when it comes to image processing, we often think of image processing tools like PhotoShop. As front-end developers, we often need to deal with special effects, such as making icons show different colors according to different states. Or when it comes to hover, deal with the contrast and shadows of the picture."

You think these are processed by PS software? No, it's purely written in css. It's amazing.

Powerful CSS:filter

CSS filters (filter) provide graphic effects such as blurring, sharpening or element discoloration. Filters are often used to adjust the rendering of images, backgrounds and boundaries. MDN

The CSS standard includes a number of functions that have achieved predefined effects.

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

Copy the code

Filter: none

No effect. The default filter is none.

Filter:blur () Gaussian blur

Give the image a Gaussian blur effect. The higher the value of the blur, the more blurred the image.

Let's try it.

Img {filter:blur (2px);;} copy the code

Brightness (%) linear multiplication

Can make the picture look brighter or darker

Img {filter:brightness 70%;} copy the code

Contrast (%) contrast

Adjust the contrast of the image.

Img {filter:contrast (50%);} copy code

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

Set a shadow effect to the image. Shadows are combined under the image, can be blurred, and can be drawn in a specific color as an offset version of the mask image. Function accepts (defined in the CSS3 background) a value of type, except for the "inset" keyword. This function is similar to the existing box-shadow box-shadow property; the difference is that through the filter, some browsers provide hardware acceleration for better performance

With this scheme, we actually change the color of some icons, such as black icons to blue icons.

CSS arbitrary Color coloring Technology of small Icons in PNG format

Img {filter: drop-shadow (705px 0 # ccc);} copy the code

Here, we project the picture into a gray area of the same size.

Hue-rotate (deg) hue rotation

Img {filter:hue-rotate (70deg);} copy the code

Invert (%) reversal

The function of this function is to reverse the input image, which is a bit like the effect of exposure

Img {filter:invert} copy the code

Grayscale (%) converts images to grayscale images

This effect can make the picture old, with a sense of the vicissitudes of the times. People who like antiquity will certainly like this effect.

Img {filter:grayscale (80%);} copy code

In addition to antiquity, there is another usage that sometimes needs to turn the whole station gray, such as Holocaust Remembrance Day.

It can be set like this.

* {filter: grayscale;-webkit-filter: grayscale;-moz-filter: grayscale;-ms-filter: grayscale;-o-filter: grayscale;} copy the code

Sepia (%) converts the image to dark brown

Next, give my little sister a warm tone.

Img {filter:sepia (50%)} copy code

Did you find out that I didn't write the url () method on it?

That's right, because I want to put this content at the end, filter:url () is the ultimate way for the css filter to change the image. CSS:filter can import a svg filter as his own filter.

The ultimate discoloration solution! Filter:url ()

Why is filter:url () the ultimate solution for discoloration of pictures? please let me talk about it slowly.

Let's first popularize how PS works. We all know that web pages have tricolor R (red) G (green) B (blue). The common RGBA also includes an opacity value, which is calculated based on the alpha channel. In other words, every pixel of the web page we see is made up of four channels: red, blue and green plus alpha. Each channel is called a swatch. The 8-bit plate in PS means 2 to the eighth power of 256. it means that the value range of each channel is (0-255) SVG research path (11)-filter:feColorMatrix.

If we can change the value of each channel, we can get any color we want perfectly. In principle, we can use the svg filter like ps to get any image we want, not just discoloration. We can even generate an image out of thin air.

Svg feColorMatrix is a good method.

Copy code img {filter:url (# change);} copy code

Through a single channel, we can change the picture into a single color.

Copy the code

Through dual channels, we can get some very cool PS effects.

Of course, here, just as an example, by configuring the values in the matrix, we can configure the values of each pixel to be displayed according to the rules we define.

Let's talk about the calculation of feColorMatrix matrix in detail here.

Among them, Rin Gi

N Bin a (alpha) is the RGBA value of each pixel in the original picture.

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

To convert the picture to monochrome, take brown rgba (14059j0pl) as an example.

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

It is not difficult to get a matrix.

0 000 target value R0 000 0 target value G0 000 0 target value B0 000 01 copy code

According to the rule, you only need to calculate, 255 / the color you want to display corresponds to the channel = target value.

The brown rgba we want is 14059 0255 and the rgba is 14059 0255.

The target value can be calculated

0 0.550 0 0 0 0.230 0 0 0 1 copy code

Multi-channel sets a cool effect.

Just like the cool pictures formed by the two channels we saw before.

What should we do if we want to improve the harmony of the film today? First of all, it is the cause of thinking and degree, that is, the more serious it is, the more expensive it is. From this cause, our moments can be written as the following. When we see that there are 3 and-1 in the moment, it must be very difficult to see how this comes from. The middle principle is easy to understand, so that we can assume that the RGB of a certain pixel is (200), (100) and (50) 255 respectively. What should be presented should be a dark orange. According to the calculation of the moment, R is changed to 200/255x3-100x255-50x255x (- 1) + 100ppm 255x (- 1) + 100ppm 255x (- 1) + 100ppm 255x (- 1) + 100x (- 1) + 50x3=-0.59 B to 200x (- 1) + 100x (- 1) + 50x3=-0.59, so the post-RGB version is: 200x1.76100x0.2TL 50xrel 0.5.

Copy code to read here, this article "what are the ways to change the color of pictures with CSS" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more about the article, welcome to pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.