用两种不同颜色的背景相乘两部分

Question

我试图在background-blend-mode: multiply;中应用两种不同的background-blend-mode: multiply;。见图：

。

我尝试过类似于这个小提琴的东西。

提前谢谢你！

Answer 1

​

* {
  padding: 0;
  margin: 0;
}
.wrap {
  background: url("https://static.pexels.com/photos/2324/skyline-buildings-new-york-skyscrapers.jpg") fixed no-repeat;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  filter: grayscale(100%);
  position: relative;
}
.row {
  width: 100vw;
  height: 70vh;
  background-color: red;
  position: fixed;
  left: 0;
  top: 0;
  mix-blend-mode: multiply;
}

<div class="wrap">
</div>
<div class="row">
  <h1>
     Header
  </h1>
</div>

​