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

I am trying to apply two different background-color with background-blend-mode: multiply;. See image: .

我试着用两种不同背景色的背景颜色:乘;见图片:。

I have tried something similar to this fiddle.

我试过类似的方法。

Thank you in advance!

提前谢谢你!

1 个解决方案

#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>