Mix-blend-mode mixed mode background-blend-mode background mixed mode isolation: isolate isolation, mixblendmode

Mix-blend-mode mixed mode background-blend-mode background mixed mode isolation: isolate isolation, mixblendmode

Css3 mix-blend-mode hybrid mode
This attribute can not only act on HTML, but also on SVG.
Compatibility: IE 8 ~ 11 Edge 12 ~ 14 Firefox 41 ~ 47 chrome 45 ~ 51 Safari 7 ~ 9.1
Many supported values:
Mix-blend-mode: normal; // normal
Mix-blend-mode: multiply; // click it to overlay the video.
Mix-blend-mode: screen; // filter color
Mix-blend-mode: overlay; // overlay
Mix-blend-mode: darken; // darken
Mix-blend-mode: lighten; // brightens
Mix-blend-mode: color-dodge; // fade color
Mix-blend-mode: color-burn; // color deepening
Mix-blend-mode: hard-light; // strong light
Mix-blend-mode: soft-light; // soft light
Mix-blend-mode: difference; // difference value
Mix-blend-mode: exclusion; // exclude
Mix-blend-mode: hue; // color
Mix-blend-mode: color; // color
Mix-blend-mode: luminosity; // brightness
Mix-blend-mode: initial; // initial
Mix-blend-mode: inherit; // inherit
Mix-blend-mode: unset; // restore

Css3 background-blend-mode background Mixed mode
It can be a mix of background images, or a mix of background images and background colors.
Compatibility: IE 8 ~ 11 Edge 12 ~ 14 Firefox 41 ~ 47 chrome 45 ~ 51 Safari 7 ~ 9.1
CSS3 backgrounds supports multiple backgrounds in IE9 + browsers. Therefore, you need to mix multiple images with commas (,) and write them in the background attribute one by one,
. Box {
Background: url(mm1.jpg) no-repeat center, url(mm2.jpg) no-repeat center;
}

Css3 isolation: isolate isolation
In addition to the inherit value that remains unchanged for ten years, it also includes auto and isolate.
Isolation: the principle of isolate is essentially because isolation: isolate creates a new cascading context.
You can block mix-blend-mode as long as there are elements that can create a stack context.
1. the z-index value is not an auto position: relative/position: absolute positioning element.
2. position: fixed, only available in the Chrome browser. other browsers follow the previous one. The value of z-index is required.
3. a flex item whose z-index value is not auto (parent element: display: flex | inline-flex ).
4. The opacity value of the element is not 1.
5. The transform value of the element is not none.
6. The value of element mix-blend-mode is not normal.
7. The filter value of the element is not none.
8. The property value specified by will-change is any of the above values.
9. Set-webkit-overflow-scrolling of the element to touch.