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

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>

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

Multiply Background with two different colors for two sections

html

css

background-image

background-color