Brief introduction of CSS3 Mix-blend-mode/background-blend-mode

This article mainly shares with you CSS3 there are two properties related to mixed mode, Mix-blend-mode and Background-blend-mode. Hope to help everyone.

First, about the mixed mode

People who are familiar with PS should know the blending mode:

There are also mixed patterns in SVG and canvas, which are essentially the same.

The following are some common mixed-mode algorithms:

There is also a description on the wiki. Interested to be able to understand the next.

In this article, we briefly introduce the CSS3 of two properties related to mixed mode, Mix-blend-mode and Background-blend-mode.

Second, CSS3 Mix-blend-mode

First, be aware that "blend-mode" is the meaning of mixed mode. That mix, uh, I don't know why. Named mix, it's possible that this property can be used not only for HTML, but also for SVG, which is simply called mix to smooth over. The CSS property function is to "mix" the element content with the background of the element and the following elements.

Compatibility is as follows:

As you can see, the latest Chrome and Firefox browsers are well supported and do not need to use a private prefix.

They support a lot of values, the Chinese and English comparison is as follows:

Mix-blend-mode:normal;          Normal mix-blend-mode:multiply;        Multiply bottom mix-blend-mode:screen;          Filter color mix-blend-mode:overlay;         Overlay Mix-blend-mode:darken;          Darken Mix-blend-mode:lighten;         Lighten Mix-blend-mode:color-dodge;     Color Dodge Mix-blend-mode:color-burn;      Color deepened mix-blend-mode:hard-light;      Strong light mix-blend-mode:soft-light;      Soft light mix-blend-mode:difference;      Difference value mix-blend-mode:exclusion;       exclusion of Mix-blend-mode:hue;             Hue Mix-blend-mode:saturation;      Saturation of Mix-blend-mode:color;           Color mix-blend-mode:luminosity;      Brightness mix-blend-mode:initial;         Initial mix-blend-mode:inherit;         Inherit Mix-blend-mode:unset;           Restoration

The back three soy sauce flavor is rich, PS never appeared, we can ignore.

If you want to experience the performance of the various blending modes, you can click here: CSS3 mix-blend-mode Mixed Mode demo

For example, if you choose overlay, the blending effect of text and subsequent content is this:

Mix-blend-mode for us to achieve a number of text effects and provide a broader idea.

Third, CSS3 Background-blend-mode

Background-blend-mode this to better understand a little, the background of the mixed mode. It can be a blend of background images, or a blend of background pictures and background colors.

Compatibility is as follows:

The supported property values are the same as above, and do not repeat the presentation.

If you want to experience the performance of the various blending modes, you can click here: CSS3 background-blend-mode Mixed Mode demo

For example, select a common multiply multiply, resulting in two sisters:

It is important to note that only the background picture and color blend in the Background property, and only in one background property.

CSS3 backgrounds Multi-background ie9+ browser began to support. Therefore, you want to mix multiple graphs, that is, a comma, one in the background attribute can be written, such as the demo's two sister:

. box {    background:url (mm1.jpg) no-repeat Center, url (mm2.jpg) no-repeat Center;}