Deep understanding of the mechanism of CSS background-blend-mode

This article is welcome to be shared and aggregated. There is no need to reprint the full text. Please respect copyright. The circle is so small. If you need it urgently, you can contact us for authorization.

1. Maybe you all know

First, let me tell you two points that you may know:

1. background-blend-mode itself has isolation characteristics, that is, when an element is applied background-blend-mode , the final effect will only be affected by the background image and background color of the current element, and will not be affected by any other elements visually in the current area.

2. After applying background-blend-mode property, not only will the images be blended with each other, but they will also be blended with the background color.

Next, let’s talk about some knowledge that you may not know. This is also the reason why many people are confused about why background-blend-mode property is rendered like this.

2. What you may not know

1. Background order affects the blending effect

The blending effect is closely related to the order of the background images in background property. In CSS multiple backgrounds, the later the background image is in the syntax, the lower its level is. This is why background-color must be written at the end of the syntax to be legal, because the background color level is always the lowest.

For example, the following two elements:

<div class="ball"></div>
<div class="ball2"></div>

Set the background blending mode to overlay, but the order of the background images of the two elements is reversed. The code is as follows:

.ball {
    width: 200px; height: 200px;
    border-radius: 50%;
    background: linear-gradient(deeppink, deeppink), linear-gradient(deepskyblue, deepskyblue);
    /* Apply overlay blend mode */
    background-blend-mode: overlay;
}
.ball2 {
    width: 200px; height: 200px;
    border-radius: 50%;
    background: linear-gradient(deepskyblue, deepskyblue), linear-gradient(deeppink, deeppink);
    /* Apply overlay blend mode */
    background-blend-mode: overlay;
}

The result is shown in the figure below. The .ball element is represented by deeppink superimposed on deepskyblue , and the final mixed color is bluish. .ball2 element is represented by deepskyblue superimposed on deeppink , and the final mixed color is purple.

2. The mixing effect is the result of multiple mixing attributes acting simultaneously

Many developers are not aware that background-blend-mode actually supports multiple blending mode values, corresponding to different background images, which is different from mix-blend-mode property that only supports a single blending mode value. For example:

.ball {
    background: linear-gradient(deeppink, deeppink), 
        linear-gradient(deepskyblue, deepskyblue);
    background-blend-mode: overlay;
}

is actually equivalent to:

.ball {
    background: linear-gradient(deeppink, deeppink), 
        linear-gradient(deepskyblue, deepskyblue);
    background-blend-mode: overlay overlay;
}

That is, deeppink actually superimposes deepskyblue and the background color (transparent in this case), deepskyblue superimposes the background color (transparent in this case).

In other words, each background image actually has its own blending mode value, which is very different from mix-blend-mode property! Usually, when using mix-blend-mode property, we only set the blending mode on the top-level element, but not on each layer of elements. This leads to a serious misconception that background-blend-mode property is different from what they expected.

We use an example to demonstrate how multiple values ​​of background-blend-mode property correspond to background images one by one.

<div class="box"></div>

.box {
    width: 200px; height: 200px;
    background: linear-gradient(to right bottom, deeppink 50%, transparent 50%),
        linear-gradient(to top right, deeppink 50%, transparent 50%), 
        darkblue;
    background-blend-mode: multiply, screen;
    position: relative;
}
/* The original deeppink color value in the middle*/
.box::before {
    content: '';
    position: absolute;
    width: 33%; height: 33%;
    inset: 0;
    margin: auto;
    background-color: deeppink;
}

At this point, the .box element presents a total of 5 colors. The RGB color value of each color and how it is generated are shown in the following figure.

in:

The square area marked with serial number ① in the middle does not apply any blending mode, and the color is deeppink . Its purpose is to facilitate comparison with the colors in areas ③ and ⑤.

• Area ② is the background color darkblue . Because the two diagonal gradients do not cover this area, the set background color is directly exposed.
• Areas ③ and ⑤ are the lower-layer gradients, that is, the gradients at the back of background attribute value. The corresponding blending mode is also the one at the back of background-blend-mode attribute value, that is, screen , the color filter mode, which can brighten the color.
• Area ④ and area ⑤ are the upper gradient, that is, the gradient with a front position in background attribute value. The corresponding blending mode is also the one with a front background-blend-mode attribute value, that is, multiply , the positive film overlay mode, which can make the color darker.
• The color of area ③ comes from the color filtering effect of the gradient color deeppink and the background color darkblue . It can be seen that the final color is brighter than deeppink . The final mixed color value is rgb(255,20,206) .
• The color of area ④ comes from the effect of mixing the gradient color deeppink and the background color darkblue by overlay. It can be seen that the final color is darker than darkblue . The final mixed color value is rgb(0,0,80) .
• Area ⑤ is the most complex. If you understand this, you will also understand the rendering performance of most background-blend-mode properties.
• Area ⑤ has a total of 3 layers, namely: the upper layer of deeppink , the blending mode is multiply ; the lower layer of deeppink , the blending mode is screen ; the background color of the bottom layer darkblue .

Therefore, the final color value is the color value of the upper layer deeppink multiply with the lower layer deeppink and the background color darkblue mixed with screen .

Because the color value of the underlying deeppink and the background color darkblue is mixed using screen it is the color of area ③. Therefore, the color of area ⑤ is the color value of deeppink and the color value of area ③ rgb(255,20,206) after multiplying, and the result is rgb(255,1,119) .

The above is the principle of the five colors of the .box element.

3. Background-blend-mode and implementation of gradient icons

Finally, let’s take a look at why most people can’t use background-blend-mode to achieve the effect of gradient icons.

For example, now there is a small delete icon with a very dark color. In theory, we can use lighten blending mode to achieve a gradient effect, because the effect of lighten is to use the lighter color. Since the icon itself is very dark, it will definitely display a gradient color. We just need to add a white background to the icon. Therefore, according to this idea, many people have written CSS code as shown below:

.icon-delete {
    background: linear-gradient(deepskyblue, deeppink), 
        url(delete.png), white;
    background-blend-mode: lighten;
}

At first glance, it seems logically impeccable. The gradient and the black icon on a white background are mixed to brighten the color. No matter how you think, the black icon should also become a gradient color. Unfortunately, the final gradient is not a gradient color, but pure white. Why does this happen?

That’s because background-blend-mode:lighten here is actually an abbreviation or abbreviation. In fact, the actual calculated value is lighten lighten . The code is as follows:

.icon-delete {
    background: linear-gradient(deepskyblue, deeppink), 
        url(delete.png), white;
    /* Actual calculated value */
    background-blend-mode: lighten lighten;
}

That is, the delete icon delete.png also applies the blending mode lighten , and is mixed with the white background color, so it becomes pure white.

Now that we know the problem, we also know how to solve it. It's very simple. Just make delete.png and the white background color blend while keeping the original icon's appearance. The following two CSS methods can both be used:

.icon-delete {
    background: linear-gradient(deepskyblue, deeppink), 
        url(delete.png), white;
    /* Set the blending mode of the PNG icon to darken */
    background-blend-mode: lighten darken;
}

Or:

.icon-delete {
    background: linear-gradient(deepskyblue, deeppink), 
        url(delete.png), white;
    /* Set the blending mode of the PNG icon to normal */
    background-blend-mode: lighten normal;
}

It is recommended to use the normal keyword because it is more clever and has better performance. The final effect is shown in the figure below.

Of course, the best way to achieve the gradient icon effect is definitely the CSS mask attribute. The gradient icon implemented here using the blending mode will have a white background, which is not a perfect implementation method. The main purpose is to let everyone understand the rendering details of background-blend-mode attribute.

IV. Completion rules of background-blend-mode

When the number of background-blend-mode property values ​​does not match background-image , the following rules apply:

If the number of background-blend-mode values ​​is greater than background-image , the extra blend modes will be ignored, for example:

.example { 
    background: linear-gradient(deepskyblue, deeppink), white;
    background-blend-mode: lighten, darken;
}

is equivalent to:

.example { 
    background: linear-gradient(deepskyblue, deeppink), white;
    background-blend-mode: lighten;
}

If the number of background-blend-mode values ​​is less than background-image , the complete background-blend-mode property value is repeated for completion, for example:

.example { 
    background: linear-gradient(deepskyblue, deeppink), 
        linear-gradient(deepskyblue, deeppink),
        linear-gradient(deepskyblue, deeppink), white;
    background-blend-mode: lighten, darken;
}

is equivalent to:

.example { 
    background: linear-gradient(deepskyblue, deeppink), 
        linear-gradient(deepskyblue, deeppink),
        linear-gradient(deepskyblue, deeppink), white;
    background-blend-mode: lighten, darken, lighten;
}

That is, lighten, darken are repeated together, instead of just repeating the last blending mode value. Therefore, the value of the completion lighten .

V. Conclusion

The CSS background-blend-mode property allows you to apply blending modes between individual background images.

background-blend-mode property is used significantly less frequently than mix-blend-mode property.

The reason is:

1. Real-world photo images are rarely presented as background background-image images because they are not conducive to barrier-free access, and the original intention of the hybrid mode design is to process such photo images;

2. The working mechanism of background-blend-mode property is not as simple as mix-blend-mode property, and many developers cannot master it well. For example, please use the blending mode to turn a small icon with a transparent background into a gradient icon. Many people use mix-blend-mode property to achieve this, but few people can use background-blend-mode property to achieve this.

Therefore, background-blend-mode property is more commonly used to enrich the background texture of CSS, for example:

I won’t go into details as this is not the main content of this article.

This article address: https://www.zhangxinxu.com/wordpress/?p=9499

This concludes this article on in-depth understanding of the working mechanism of CSS background-blend-mode. For more information on the working mechanism of CSS background-blend-mode, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!