html - 在一个 div 中制作背景图像 B/W

Question

我正在尝试实现一种效果，我有一个固定的背景图像，上面有两个 div。是否有可能以一种方式编写 CSS，使图像在一个 div 中保持原始状态，而在另一个 div 中显示黑色和白色？这将产生我正在努力实现的很酷的滚动效果。

.section-one{
  background-image: url(https://cdn.pixabay.com/photo/2018/08/19/19/56/peacock-feathers-3617474_960_720.jpg)
  background-attachment: fixed;
  background-size: cover;
}

.one{
  padding: 50px 0;
  border-bottom: 3px solid white;
  color: white;
  text-align: center;
}

.two{
  padding: 50px 0;
  color: white;
  text-align: center;
}

<section class="section-one">
  <div class="one">
    <h1>Content One</h1>
  </div>
  <div class="two">
    <h1>Content Two</h1>
  </div>
</section>

感谢您对此的任何帮助

Answer 1

我会考虑使用 filter 和 background-attachement:fixed 来实现这一点:

.section-one>div {
  position: relative;
  z-index: 0;
}

.section-one>div:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(https://picsum.photos/800/600?image=1069) center/cover fixed;
}

.two:before {
  filter: grayscale(100%);
}

.one {
  padding: 50px 0;
  border-bottom: 3px solid white;
  color: white;
  text-align: center;
}

.two {
  padding: 50px 0;
  color: white;
  text-align: center;
}

<section class="section-one">
  <div class="one">
    <h1>Content One</h1>
  </div>
  <div class="two">
    <h1>Content Two</h1>
  </div>
</section>