CodePen Embed - isolation property test with background image

<div class="big-square ">
  <div class="isolation-auto">auto</div>
  <div class="isolation-isolate">isolate</div>
</div>
</div>

.isolation-auto {
  isolation: auto;

  background-color: magenta;
  width: 100px;
  height: 100px;
  border: 1px solid white;
  padding: 1rem;

  mix-blend-mode: difference;
}

.isolation-isolate {
  isolation: isolate;

  background-color: magenta;
  width: 100px;
  height: 100px;
  border: 1px solid white;
  padding: 1rem;
}

.big-square {
  background-color: rebeccapurple;
  background-image: url("https://assets.codepen.io/32795/blend-mode-example-texture.jpg");
  width: 400px;
  height: 400px;
}

This Pen is owned by Carlos Araya on CodePen.

See more by @caraya on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.