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

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.