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

Question

我正在尝试将两个不同的background-color应用于background-blend-mode: multiply;。见图：

我尝试过与fiddle类似的内容。

提前谢谢！

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>