230 Chapter 18
isolation
When using mix-blend-mode, be aware that it will blend with every visual
element drawn behind it on the screen, which can cause unintended con-
sequences. For example, say you have the following markup structure, in
which an img element is nested inside a div, inside the body:<body>
<div>
<img src="foo.jpg">
</div>
</body>Now you set a background image on the body and the mix-blend-mode
property on the img:body { background-image: url('bunny.png'); }
img { mix-blend-mode: screen; }In this case, the img will blend with the body because the div is transpar-
ent, as shown in the example on the left of Figure 18-5.Figure 18-5: Isolating an element to set a new stacking contextIf the result isn’t exactly what you want, you can make an element
c reate a new stacking context,^1 similar to the way setting position: relative
on an element resets the coordinates for absolute positioning. When blend-
ing, this process is called isolating the element, and you use the isolation
property:E { isolation: isolation-mode; }The default value is auto, but to create the new stacking context, you
must use the alternate value, isolate:div { isolation: isolate; }- If you need a refresher on stacking contexts, go to https://developer.mozilla.org/docs/Web/
Guide/CSS/Understanding_z_index/The_stacking_context/.