CSS3 Mixed Mode Mix-blend-mode/background-blend-mode Introduction

CSS3 has two properties associated with the blending mode, mix-blend-mode and background-blend-mode .

The CSS property function is to "mix" the element content with the background of the element and the following elements.

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 is rich in flavor, never appeared in PS

mix-blend-modeBy default, all elements that are lower than the stacking order are blended, what if we want the values to be mixed with some one or two elements instead of all? You can try using CSS3.isolation:isolate

Third, CSS3 Background-blend-mode

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

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. So, you want to mix multiple graphs, that is, a comma, a write in the background properties of the can be,

CSS3 Mixed Mode Mix-blend-mode/background-blend-mode Introduction