SOURCE

<div class="outer example">
  <div>
    <span>
      原前景
    </span>
  </div>
  <div>
    <span>
      原背着物
    </span>
  </div>
</div>
<div class="outer hue">
  <div>
    <span>
      色相
    </span>
  </div>
  <div>
  </div>
</div>
<div class="outer saturation">
  <div>
    <span>
      饱和度
    </span>
  </div>
  <div>
  </div>
</div>
<div class="outer color">
  <div>
    <span>
      颜色
    </span>
  </div>
  <div>
  </div>
</div>
<div class="outer luminosity">
  <div>
    <span>
      明度
    </span>
  </div>
  <div>
  </div>
</div>

.outer {
  position: relative;
  display: inline-block;
  width: 300px;
  height: 300px;
  margin: 20px auto;
  border: 1px solid red;
}

.outer > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.outer > div:first-child {
  background: url(https://raw.githubusercontent.com/meyerweb/csstdg4figs/master/19-filters-blending-clipping-masking/i/Kitchen-Dough-Blender.jpg), url(https://raw.githubusercontent.com/meyerweb/csstdg4figs/master/19-filters-blending-clipping-masking/i/Kitchen-Dough-Blender.jpg), url(https://raw.githubusercontent.com/meyerweb/csstdg4figs/master/19-filters-blending-clipping-masking/i/Kitchen-Dough-Blender.jpg), linear-gradient(45deg, gray, gray);
  z-index: 2;
}

.outer > div:last-child {
  background: url(https://raw.githubusercontent.com/meyerweb/csstdg4figs/master/19-filters-blending-clipping-masking/i/Kitchen-Dough-Blender.jpg), linear-gradient(45deg, gray, gray), linear-gradient(45deg, black, white), linear-gradient(45deg, black, white);
  z-index: 1;
}

.outer > div:first-child,
.outer > div:last-child {
  background-size: 50% 50%;
  background-position: top left, top right, bottom left, bottom right;
  background-repeat: no-repeat;
}

.outer > div:last-child {
  backg
}

.outer > div > span {
  position: absolute;
  top: 100%;
  width: 100%;
  margin-top: 5px;
  text-align: center;
}

.example {
  width: 610px;
}
.example > div {
  width: 300px;
}
.example > div:last-child {
  left: 310px;
}
.hue > div:first-child {
  mix-blend-mode: hue;
}
.saturation > div:first-child {
  mix-blend-mode: saturation;
}
.color > div:first-child {
  mix-blend-mode: color;
}
.luminosity > div:first-child {
  mix-blend-mode: luminosity;
}