Question

经过几个小时的搜索，我没有找到任何解决方法。

我想做的事情很简单：我的页面有固定的背景图像，所以当我上下滚动时它不会移动，这没关系。但是，由于我的页面分为几部分（这是一种简历，所以诸如技能，专业经验等部分），我希望背景图像在用户滚动时平滑更改其颜色，因此每个部分的颜色都不同。

不幸的是，我不知道有任何网站具有这种行为，因此我无法提供任何示例。

最简单的方法是什么？

Answer 1

取决于您希望的着色方式，将确定方法。如果着色很复杂（只有photoshop可以做到），那么您应该制作几个版本并将其放置在元素中

background-attachment: fixed;

...并为所有人保持相同的背景位置。

如果您只想要透明的过度着色，可以使用CSS和透明的背景色：rgba()。

HTML

<main-background>
  <section-one></section-one>
  <section-two></section-two>
  <section-three></section-three>
  <section-four></section-four>
  <section-five></section-five>
</main-background>

CSS

body {
  margin: 0;
}
main-background {
  display: flex;
  background: url(https://cdn.cjr.org/wp-content/uploads/2019/07/AdobeStock_100000042-e1563305717660-1300x500.jpeg) no-repeat fixed 50% 50% / cover;
  height: 100vh;
  width: 100vw;
  flex-wrap: wrap;
  overflow: auto;

  > * {
    flex: 1;
    min-width: calc(100%/3);
    min-height: 75%;
  }
}

section-one {
  background: rgba(234,123,213,0.3)
}

section-one {
  background: rgba(234,123,213,0.3)
}

section-two {
  background: rgba(234,123,0,0.3)
}

section-three {
  background: rgba(0,123,213,0.3)
}

section-four {
  background: rgba(0,0,132,0.3)
}

section-five {
  background: rgba(111,222,0,0.3)
}

笔：https://codepen.io/bstees/pen/yLybMRz

滚动时更改固定背景图像的颜色

1 个答案: