SOURCE

<div class="outer example">
  <div>
    <span>
      原前景
    </span>
  </div>
  <div>
    <span>
      原背着物
    </span>
  </div>
</div>
<div class="outer hard-light">
  <div>
    <span>
      强光
    </span>
  </div>
  <div>
  </div>
</div>
<div class="outer soft-light">
  <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://github.com/meyerweb/csstdg4figs/blob/master/19-filters-blending-clipping-masking/i/Chenonceau_Kitchen_Stove.jpg?raw=true), url(https://github.com/meyerweb/csstdg4figs/blob/master/19-filters-blending-clipping-masking/i/Chenonceau_Kitchen_Stove.jpg?raw=true), url(https://github.com/meyerweb/csstdg4figs/blob/master/19-filters-blending-clipping-masking/i/Chenonceau_Kitchen_Stove.jpg?raw=true), linear-gradient(45deg, gray, gray);
  z-index: 2;
}

.outer > div:last-child {
  background: url(https://github.com/meyerweb/csstdg4figs/blob/master/19-filters-blending-clipping-masking/i/Chenonceau_Kitchen_Stove.jpg?raw=true), 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;
}
.hard-light > div:first-child {
  mix-blend-mode: hard-light;
}
.soft-light > div:first-child {
  mix-blend-mode: soft-light;
}