css 背景图像和文本的视差滚动效果

093gszye 于 2024-01-09 发布在其他

关注(0)|答案(1)|浏览(122)

所以我想让我的页面的主要内容滚动到我的网站标题。网站标题由一个背景图像和一些文字组成。现在的问题是，我只是不能让文字与背景图像一起“固定”。
带“背景附件：修正了”我能够使主要内容滚动在网站标题背景图像，但网站标题文本滚动在图像以及。

.site-header {
  background-image: url("https://www.w3schools.com/howto/img_parallax.jpg");
  background-size: cover;
  background-position: top;
  background-attachment: fixed;
  padding-bottom: 300px;
  padding-top: 300px;
}
.site-header__text {
  text-align: center;
}
.site-header__heading{
  font-size: 3rem;
  margin: 0;
}
.site-header__subheading {
  font-size: 2rem;
  margin: 0;
}

个字符

css

来源：https://stackoverflow.com/questions/77770321/parallax-scrolling-effect-over-background-image-and-text

1条答案

按热度按时间

mkh04yzy1#

你应该使它粘在top:0;和设置z-index适当获得视差效果。
这里是更新的代码

.site-header {
  background-image: url("https://www.w3schools.com/howto/img_parallax.jpg");
  background-size: cover;
  background-position: top;
  background-attachment: fixed;
  padding-bottom: 300px;
  padding-top: 300px;
    z-index: 1;
  position:sticky;
  top: 0;
}
.site-header__text{
  text-align: center;
}

.site-header__heading{
  font-size: 3rem;
  margin: 0;
}
.site-header__subheading {
  font-size: 2rem;
  margin: 0;
}

main{
  background:white;
  z-index: 10;
  position: relative;
}

个字符

赞(0）回复(0）举报 2024-01-09

我来回答

css 背景图像和文本的视差滚动效果

1条答案

相关问题

热门标签

最新问答