Home > Developer > CSS

CSS Blending mode

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Previous words

Cascading context Z-index is just a matter of resolving two element overrides, who are closer to the user. The CSS blending mode is the problem of how the two-element overlay is mixed. If you know Photoshop, you should be familiar with this phenomenon. CSS3 has two properties related to mixed mode: mix-blend-mode and background-blend-mode , this article details the CSS blending mode

Element blending

Element blending Mix-blend-mode applied to a blend between two elements

Mix-blend-mode

Initial value: Normal

Applies to: all elements

Inheritance: None

Value: Normal (OK) | Multiply (multiply) | screen (color filter) | Overlay (Overlay) | Darken (Darken) | Lighten (lighten) | Color-dodge (color Dodge) | Color-burn (color burn) | Hard-light (Strong light) | Soft-light (soft light) | Difference (difference) | Exclusion (Exclude) | Hue (hue) | Saturation (saturation) | Color (colors) | Luminosity
(brightness) | Initial (initial) | Inherit (inheritance) | unset (recovery)

Compatibility: IE browser, android4.4-not supported, Safari and iOS need to add-webkit-prefix

[note] The element creates a cascading context, and the Z-index property is valid

Background blending

Background blending Background-blend-mode applied to a blend of multiple background or background and background colors of an element

Background-blend-mode

Initial value: Normal

Applies to: all elements

Inheritance: None

Value: Normal (OK) | Multiply (multiply) | screen (color filter) | Overlay (Overlay) | Darken (Darken) | Lighten (lighten) | Color-dodge (color Dodge) | Color-burn (color burn) | Hard-light (Strong light) | Soft-light (soft light) | Difference (difference) | Exclusion (Exclude) | Hue (hue) | Saturation (saturation) | Color (colors) | Luminosity
(brightness) | Initial (initial) | Inherit (inheritance) | unset (recovery)

Compatibility: IE browser, android4.4-not supported, Safari and iOS need to add-webkit-prefix

Isolation

The role of isolation isolation is to create a stacking context stacking contexts, used primarily for use with Mix-blend-mode attributes, to apply blending mode only to an element or to a group of elements

Isolation

Initial value: Auto

Applies to: all elements

Inheritance: None

Value: Auto | Isolate (Creating a new stacking context) | Initial | Inherit | unset

<style>body{background-color:gray;}. TEST1,.TEST2{DISPLAY:INLINE-BLOCK;WIDTH:100PX;HEIGHT:100PX;BORDER:1PX solid black;}. Test2{isolation:isolate;}. In{width:50px;height:50px;background-color:red;mix-blend-mode:screen;} </style>


If you do not use isolation: isolate the Create stacking context, because .test1 it is .test2 transparent to the background color, it is .in mixed with <body> the background color and becomes pink. After use, it is isolation: isolate .test2 isolated from the background and is <body> not <body> blended to preserve its original red


Because isolation: isolate the role is to create a stacking context, so long as the stacking context can be created to achieve the effect of isolation, so, similarly, relative, filter and other styles can also achieve similar effects

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More