SOURCE

<p>
  背景混合, 背着物混合, 背景混合+独立混合, 原始效果
</p>
<div class="outer">
  <div class="one">
  </div>
  <div class="two">
  </div>
  <div class="three">
  </div>
  <div class="four">
  </div>
</div>
<p>
  独立混合+背着物混合, 背着物混合,原始效果
</p>
<div class="outer2">
  <div class="a">
    <img src="https://ranwawa-personal.oss-cn-beijing.aliyuncs.com/study/diamond.png"
    />
  </div>
  <div class="b">
    <img src="https://ranwawa-personal.oss-cn-beijing.aliyuncs.com/study/diamond.png"
    />
  </div>
  <div class="c">
    <img src="https://ranwawa-personal.oss-cn-beijing.aliyuncs.com/study/diamond.png"
    />
  </div>
</div>

.outer {
  background-color: #ccc;
}

.outer > div {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-image: url('https://ranwawa-personal.oss-cn-beijing.aliyuncs.com/study/star.svg'), url('https://ranwawa-personal.oss-cn-beijing.aliyuncs.com/study/diamond.png');
  background-color: goldenrod;
  background-size: contain;
  background-position: 50% 50%;
}

.one {
  background-blend-mode: color-burn, luminosity;
}

.two {
  mix-blend-mode: multiply;
}

.three {
  background-blend-mode: color-burn, luminosity;
  mix-blend-mode: multiply;
}

.outer2 {
  background-color: #ccc;
}

.outer2 > div {
  display: inline-block;
  width: 100px;
  height: 100px;
}

img {
  width: 100%;
  height: 100%;
}

.a > img,
.b > img{
  mix-blend-mode: difference;
}

.a {
  isolation: isolate;
}