Deeply understand the mechanism of CSS background blend mode

Time:2021-1-14

This article is welcome to share and aggregate, full text reprint is not necessary, respect copyright, the circle is so big, if urgent need can contact authorization.

1、 Maybe everyone knows

First of all, let’s talk about two points that you may all know:

1.background-blend-modeIt has isolation characteristics, that is, an element applicationbackground-blend-modeIn background blending 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 in the current area.

2. Applicationbackground-blend-modeAttribute, not only between the images to be mixed, but also mixed with the background color.

Next, let’s talk about the knowledge that you may not know, which is why many people don’t knowbackground-blend-modeAttribute to render like this.

2、 Maybe not

1. The background order affects the mixing effect

Mixing effects andbackgroundAttributes are closely related to the order of background images. In CSS multi background, the lower the level of the background image in the syntax, which is whybackground-colorThe reason why it is legal to write in the last grammar is that the level of background color 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 opposite. The code is as follows:

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

The results are shown in the figure below,.ballThe elements are as followsdeeppinkAfter the overlaydeepskyblueThe final mixed color is bluish;.ball2The elements are as followsdeepskyblueAfter the overlaydeeppinkThe final color is purple.

2. The mixing effect is the result of multiple mixing attributes acting at the same time

Many developers don’t know,background-blend-modeSupport actually means that you can set multiple mixed mode values corresponding to different background images, which is different from that of only one mixed mode valuemix-blend-modeAttributes are different. For example:


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

In fact, it is equivalent to:


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

That is to say,deeppinkIn fact, the overlay is deepskyblue and the background color (transparent in this case),deepskyblueSuperimposed is the background color (transparent in this case).

In other words, in fact, each background image has its own blend mode value, which is the sum ofmix-blend-modeThere is a huge difference in attributes! Usually, in the use ofmix-blend-modeIn the scene of attribute, we only set the mixed mode on the top-level elements, but not all the elements of each layer, which brings a serious thinking error from one layer to the other, thinking that the value set by the background mixed mode also acts on the top-level background image, which leads to many developers’ confusionbackground-blend-modeThe rendering performance of the attribute is different from what you expect.

Let’s demonstrate it through a casebackground-blend-modeHow the multiple values of the attribute correspond to the background image 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 deep pink color value in the middle*/
.box::before {
    content: '';
    position: absolute;
    width: 33%; height: 33%;
    inset: 0;
    margin: auto;
    background-color: deeppink;
}

here.boxThe element presents five colors in total, and the RGB color value of each color and how it is generated are shown in the figure below.

Among them:

The square area marked with serial number (1) in the middle does not apply any blending mode, and the color isdeeppinkIt is convenient for you to compare with the color of area 3 and area 5.

  • Area 2 is the background colordarkblueBecause the two oblique gradients do not cover this area, the setting background color is directly exposed.
  • Region 3 and region 5 are lower gradients, i.ebackgroundThe gradient at the back of the attribute value corresponds to the same blending modebackground-blend-modeThe one at the bottom of the property value, that isscreen, filter mode, can make the color bright.
  • Region 4 and region 5 are upper gradients, i.ebackgroundThe gradient at the top of the attribute value corresponds to the same blending modebackground-blend-modeThe one with the highest property value, that ismultiply, positive film bottom mode, can make the color dark.
  • The color of region 3 is derived from gradual discolorationdeeppinkAnd background colordarkblueThe final color ratio can be seen from the effect of filter color mixingdeeppinkIt’s brighter. What’s the final color valuergb(255,20,206)
  • The color of region 4 is derived from gradual discolorationdeeppinkAnd background colordarkblueThe final color ratio can be seen from the effect of positive film bottom mixingdarkblueIt’s deeper. What’s the final color valuergb(0,0,80)
  • Region 5 is the most complex. If you understand this, you will understand most of thembackground-blend-modeThe rendering of the properties shows.
  • There are three layers in area 5: the upper layerdeeppinkThe mixed mode ismultiplyLower leveldeeppinkThe mixed mode isscreen; the background color of the bottom layerdarkblue

Therefore, the final color value performance is the upper layerdeeppinkusemultiplyMixed lower layerdeeppinkAnd background colordarkblueusescreenColor value after mixing.

Because of thedeeppinkAnd background colordarkblueusescreenThe color value after mixing is the color of region 3. Therefore, the color of area 5 isdeeppinkAnd the color value of region 3rgb(255,20,206)The color value of the positive film after mixing is as followsrgb(255,1,119)

That’s all.boxThe principle of each of the five colors of the elements.

3、 Implementation of background blend mode and gradient Icon

Finally, why can’t most people use itbackground-blend-modeAchieve the effect of gradient icon.

For example, there is now a very dark delete icon. In theory, we can use itlightenBlend mode achieves a gradient effect becauselightenThe effect is which color is lighter and which color is used. Because the color of the icon itself is very dark, it must show a gradient color. Just add a white background to the icon. Therefore, according to this idea, many people write the following CSS code:


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

At first glance, it seems that the logic is impeccable. Gradient and black icons on a white background are mixed and lightened. How can we think that black icons should also become gradients? Unfortunately, the final gradients are not gradients, but pure white. Why do we have such a result?

That’s because it’s herebackground-blend-mode:lightenIt’s actually an abbreviation, or abbreviation. In fact, the actual calculated value islighten 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 to delete the icondelete.pngMixed mode is also appliedlighten, mixed with the white background color to make it pure white.

If you know where the problem lies, you will know how to solve it. It’s very simple. Let’s godelete.pngAfter mixing with the white background color, you can still keep the appearance of the original icon. The following two CSS methods are OK:

.icon-delete {
    background: linear-gradient(deepskyblue, deeppink), 
        url(delete.png), white;
    /*The mixed mode of PNG icon is set to dark separately*/
    background-blend-mode: lighten darken;
}

Or:

.icon-delete {
    background: linear-gradient(deepskyblue, deeppink), 
        url(delete.png), white;
    /*The mixed mode of PNG icon is set to normal separately*/
    background-blend-mode: lighten normal;
}

RecommendednormalKeyword, because it’s more ingenious and has better performance. The final effect is shown in the figure below.

Of course, the best way to achieve gradient icon effect is definitely CSSmaskMask attribute, here the use of mixed mode to achieve the gradient icon will have a white background, is not a perfect way to achieve, the main purpose is to let you knowbackground-blend-modeProperty.

4、 Complement rules of background blend mode

Whenbackground-blend-modeThe number and number of attribute values forbackground-imageIn case of mismatch, follow the following application rules:

Ifbackground-blend-modeThe number of values for is greater thanbackground-image, the extra mixed modes will be ignored, for example:


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

Equivalent to:


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

Ifbackground-blend-modeThe number of values for is less thanbackground-image, the completebackground-blend-modeFor example:


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

Equivalent to:


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

that islighten, darkenRepeat together instead of just repeating the last mixed mode value. Therefore, the value of the complement is zerolighten

5、 Conclusion

CSS background-blend-modeProperty allows the blending mode to be applied between background images.

background-blend-modeThe use frequency of attributes is significantly lower than that of attributesmix-blend-modeProperty.

The reasons are as follows:

1. Real world photos and images are rarely used as referencebackground-imageBackground image presentation is not conducive to barrier free access, and the original intention of hybrid mode design is to process this kind of photo image;

2.background-blend-modeMechanism of attribute actionmix-blend-modeAttribute is so simple that many developers can’t control it well. For example, use blending mode to change small icons with transparent background into gradient iconsmix-blend-modeProperty implementation of many people, but can usebackground-blend-modeFew people implement attributes.

Therefore, at presentbackground-blend-modeAttribute is more commonly used to enrich the background texture of CSS, for example:

It is not the main content of this paper.

Address: https://www.zhangxinxu.com/wordpress/?p=9499

So far, this article about in-depth understanding of the mechanism of CSS background blend mode is introduced here. For more information about the role of CSS background blend mode, please search previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!