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>

Answer 2

关于将颜色更改为黑白，css提供了可以帮助您完成工作的灰度滤镜：

nb=255 ; dc -e '[dec to bin = ] 10 i 2 o '"$nb"' r n p'

在一个div内制作黑白背景图像

2 个答案: