Shulou(Shulou.com)06/01 Report--

Cascading context z-index only solves the problem of two elements covering which one is closer to the user. The CSS mixing mode, on the other hand, deals with the problem of how to mix the overlay parts of two elements. 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 will introduce CSS mixed mode in detail.

Element mixing

Element mixing mix-blend-mode is applied to the mixing between two elements

Mix-blend-mode

Initial value: normal

Apply to: all elements

Inheritance: none

Value: normal (normal) | multiply (positive overlay) | screen (filter) | overlay (overlay) | darken (darkening) | lighten (lightening) | color-dodge (color dilution) | color-burn (color deepening) | hard-light (strong light) | soft-light (soft light) | difference (difference) | exclusion (exclusion) | hue (hue) | saturation (saturation) | color (color) | luminosity (color)

(luminance) | initial (initial) | inherit (inheritance) | unset (restore)

Compatibility: IE browser, android4.4- does not support, safari and IOS need to add-webkit- prefix

[note] this element creates a cascading context, and the z-index attribute is valid

Background mixing

Background blending background-blend-mode is applied to the multi-background image of an element or the mixing between the background image and the background color

Background-blend-mode

Initial value: normal

Apply to: all elements

Inheritance: none

Value: normal (normal) | multiply (positive overlay) | screen (filter) | overlay (overlay) | darken (darkening) | lighten (lightening) | color-dodge (color dilution) | color-burn (color deepening) | hard-light (strong light) | soft-light (soft light) | difference (difference) | exclusion (exclusion) | hue (hue) | saturation (saturation) | color (color) | luminosity (color)

(luminance) | initial (initial) | inherit (inheritance) | unset (restore)

Compatibility: IE browser, android4.4- does not support, safari and IOS need to add-webkit- prefix

Isolation

The purpose of isolating isolation is to create a stacking context stacking context, which is mainly used when used with the mix-blend-mode attribute to apply the mixed pattern only to a certain element or group of elements

Isolation

Initial value: auto

Apply to: all elements

Inheritance: none

Value: auto | isolate (create a new stacking context) | initial | inherit | unset

Body {background-color: gray;} .test1, .test2 {display: inline-block;width: 100pxposition height: 100px borderpaste 1px solid black;} .test2 {isolation: isolate;} .in {width: 50pxash height: 50pxbot backgroundcolor: red;mix-blend-mode: screen;}

If you do not use isolation: isolate to create a stacking context, because the .test1 and .test2 background colors are transparent, .in mixes with the background color to become pink. After using isolation: isolate, .test2 is isolated from it and does not mix with the background, thus retaining its original red color

[note] since the function of isolation: isolate is to create a stacking context, isolation can be achieved as long as the stacking context can be created. Similarly, styles such as relative and filter can achieve similar effects.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.