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 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-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
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>
</head>
<body>
<p class="test1">
<p class="in"></p>
</p>
<p class="test2">
<p class="in"></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 <body> background color and become pink. After using isolation: isolate, .test2 is isolated from <body> and does not interact with the background of <body> 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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
