Deep understanding of CSS mix-blend-mode filter color screen blending mode

1. A quick overview of screen blending modes

screenThe mixed mode is called "filter color" in China, and its calculation formula is:

The C in the formula represents the final mixed RGB color value (range is 0-255), and A and B represent the RGB color value of the two colors used for mixing (the range is also 0-255).

It can be seen from the content of the formula that the color of the filter color mixing mode is to multiply the pixel values ​​of the complementary colors of the two colors and then divide by the complementary color value of 255.

For example, there is a red color whose RGB value is (255,0,0), and a blue color whose RGB value is (0,0,255). Then the color value of the two colors after using the filter color mixing mode is:

• R = 255 – (255 – 255) * (255 – 0) / 255 = 255
• G = 255 – (255 – 0) * (255 – 0) / 255 = 0
• B = 255 – (255 – 0) * (255 – 255) / 255 = 255

So the final color value is RGB(255,0,255), which is the color of the following color block:

Then the following is mix-blend-mode:screenthe real-time mixed color value effect of the application code:

It can be seen that the colors presented by the two color blocks are exactly the same, which not only verifies the correctness of the formula, but also has a first understanding of the color filter mode.

Second, the characteristics of the color filter mode and web applications

Here are some intuitive features:

1. Perform color filter on any color and black, and still present the original color;
2. Any color and white color filter will be white;
3. Any color and other colors will be lighter after the color filter mode is mixed, which is similar to the effect of bleaching.

The filter mode is very useful for creating neon glow effects in images, and this feature is also useful for web development.

We often need to add some scene effects to some image materials, such as various weather, or neon glow effects.

The traditional method is to use a transparent PNG image to cover it, but using a PNG transparent foreground image has the following two disadvantages:

1. The effect is unnatural and lacks the feeling of being completely integrated with the base map;
2. The size of the picture is too big, hundreds of K at every turn;

Now, with the color filter mode, we only need to prepare a jpg image with a black background. Applying the screen blending mode, not only can it be completely integrated with the base image, but the file size of the foreground image used is only a PNG image. 1/10 of that.

For example, we have the following base map, forest and deer:

Then, there are the following special effects foreground pictures:

   

Respectively mix with the provided base map, you can see the real-time effect as shown in the figure below:

 

 

 

You can see that the effect is great and natural. The size of the foreground material used here is 300*400, and the size is only about 20K, and the overhead is very small.

Can also be applied to HTML video

The filter blending mode can be used not only for images, but also for videos. Similarly, as long as we make the background color of the video black, it can blend well with the background of the web page.

For example, here is a screenshot of a webpage, and a scene graph in a two-dimensional style:

 

Then there are two video special effects materials with black background, which are fireworks blooming and pouring rain (please click if the video does not move):

 

By setting the video element blending mode to screen, you can get the wonderful effects shown below (please click if the video does not move):

 

Added new ideas for the realization of web page dynamics.

3. Compatibility of filter color mixing mode

The compatibility of the filter color mixing mode is still very slippery. It has been supported at the end of 2014. It has been almost 5 years now. According to the update speed of the mobile phone, as long as your product is not national-level, the mobile terminal can be used with confidence.

Because Edge embraces the Chrome browser, Edge75 is also supported. It is foreseeable that after 10 years, when the window7 system is not used by anyone, the PC side can also shine.

No matter in which language, no matter what design tool it is, the color filter blending mode is very basic and a very common blending mode. If you are committed to making a difference in the field of graphics performance, you must use the blending algorithm of this mode , Special effects and application scenarios, remember to be so familiar.

Well, that’s all for this article, thanks for reading!