CSS blending modes

Previous words

 Cascading context z-index only solves the problem of two elements covering which one is closer to the user. The CSS blending mode deals with the issue of how to blend the covering parts of two elements. If you know photoshop, you should be familiar with this phenomenon. CSS3 has two properties related to mix mode: mix-blend-mode and background-blend-mode. This article will introduce CSS mix mode in detail

Element Mix

  Element Mixmix-blend-mode is applied to the blend between two elements

mix-blend-mode

Initial value: normal

Applies to: all elements

Inheritance: None

Value: normal(normal) | multiply(multiply) | screen(screen) ) | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light ) | difference | exclusion | hue | saturation | color | luminosity
| initial | inherit | unset )

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

 [Note] This element will create a cascading context, z-index attribute Valid

Background blending

  Background blending background-blend-mode applies to multiple background images of an element or a blend between a background image and a background color

background -blend-mode

Initial value: normal

Applies to: all elements

Inheritance: None

Value: normal(normal) | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard- light (strong light) | soft-light (soft light) | difference (difference) | exclusion (exclusion) | hue (hue) | saturation (saturation) | color (color) | luminosity
(brightness) | initial (Initial) | inherit (inherited) | unset (restore)

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

isolation

The function of isolation is to create a stacking context, which is mainly used when used with the mix-blend-mode attribute to apply the blend mode only to a certain element or a certain group. Element

isolation

Initial value: auto

Applies to: all elements

Inheritance: None

Value: auto | isolate (create 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>


<p>
    </p><p></p>

<p>
    </p><p></p>

If you do not use isolation: isolate to create a stacking context, due to .test1 and .test2 have transparent background colors, then .in will mix with the background color and become pink. After using isolation: isolate, .test2 is isolated from and does not interact with the background of Mixed, thus retaining its original red color

Since isolation: isolate’s function is to create a stacking context, so as long as a stacking context can be created, the isolation effect can be achieved, so, similarly, Relative, filter and other styles can also achieve similar effects

For more CSS mixed mode related articles, please pay attention to the PHP Chinese website!