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

Question

所以我想让页面的主要内容滚动到我的网站标题上。站点标题由背景图像和其上的一些文本组成。现在的问题是我无法将文本与背景图像一起“固定”。

使用“background-attachment：fixed”，我可以使主要内容在网站标题背景图像上滚动，但是网站标题文本也会在图像上滚动。

.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;
}

<header class="site-header">
   <hgroup class="site-header__text">
    <h1 class="site-header__heading">Header Text</h1>
    <p class="site-header__subheading">Subheader Text</p>
  </hgroup>
</header>

<main>
  <p class="main_text">
     Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam reprehenderit soluta, blanditiis eum fuga quae illum delectus perferendis voluptates corrupti dolor cum deleniti fugiat sit inventore nihil alias quia sed.
  </p>
</main>

Answer 1

您应该将其粘在

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;
}

<header class="site-header">
   <hgroup class="site-header__text">
    <h1 class="site-header__heading">Header Text</h1>
    <p class="site-header__subheading">Subheader Text</p>
  </hgroup>
</header>

<main>
  <p class="main_text">
     Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam reprehenderit soluta, blanditiis eum fuga quae illum delectus perferendis voluptates corrupti dolor cum deleniti fugiat sit inventore nihil alias quia sed.
     Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam reprehenderit soluta, blanditiis eum fuga quae illum delectus perferendis voluptates corrupti dolor cum deleniti fugiat sit inventore nihil alias quia sed. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam reprehenderit soluta, blanditiis eum fuga quae illum delectus perferendis voluptates corrupti dolor cum deleniti fugiat sit inventore nihil alias quia sed. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam reprehenderit soluta, blanditiis eum fuga quae illum delectus perferendis voluptates corrupti dolor cum deleniti fugiat sit inventore nihil alias quia sed. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam reprehenderit soluta, blanditiis eum fuga quae illum delectus perferendis voluptates corrupti dolor cum deleniti fugiat sit inventore nihil alias quia sed. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam reprehenderit soluta, blanditiis eum fuga quae illum delectus perferendis voluptates corrupti dolor cum deleniti fugiat sit inventore nihil alias quia sed. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam reprehenderit soluta, blanditiis eum fuga quae illum delectus perferendis voluptates corrupti dolor cum deleniti fugiat sit inventore nihil alias quia sed. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam reprehenderit soluta, blanditiis eum fuga quae illum delectus perferendis voluptates corrupti dolor cum deleniti fugiat sit inventore nihil alias quia sed. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam reprehenderit soluta, blanditiis eum fuga quae illum delectus perferendis voluptates corrupti dolor cum deleniti fugiat sit inventore nihil alias quia sed. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam reprehenderit soluta, blanditiis eum fuga quae illum delectus perferendis voluptates corrupti dolor cum deleniti fugiat sit inventore nihil alias quia sed. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam reprehenderit soluta, blanditiis eum fuga quae illum delectus perferendis voluptates corrupti dolor cum deleniti fugiat sit inventore nihil alias quia sed. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam reprehenderit soluta, blanditiis eum fuga quae illum delectus perferendis voluptates corrupti dolor cum deleniti fugiat sit inventore nihil alias quia sed. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam reprehenderit soluta, blanditiis eum fuga quae illum delectus perferendis voluptates corrupti dolor cum deleniti fugiat sit inventore nihil alias quia sed. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam reprehenderit soluta, blanditiis eum fuga quae illum delectus perferendis voluptates corrupti dolor cum deleniti fugiat sit inventore nihil alias quia sed. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam reprehenderit soluta, blanditiis eum fuga quae illum delectus perferendis voluptates corrupti dolor cum deleniti fugiat sit inventore nihil alias quia sed. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam reprehenderit soluta, blanditiis eum fuga quae illum delectus perferendis voluptates corrupti dolor cum deleniti fugiat sit inventore nihil alias quia sed. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam reprehenderit soluta, blanditiis eum fuga quae illum delectus perferendis voluptates corrupti dolor cum deleniti fugiat sit inventore nihil alias quia sed. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam reprehenderit soluta, blanditiis eum fuga quae illum delectus perferendis voluptates corrupti dolor cum deleniti fugiat sit inventore nihil alias quia sed. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam reprehenderit soluta, blanditiis eum fuga quae illum delectus perferendis voluptates corrupti dolor cum deleniti fugiat sit inventore nihil alias quia sed. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam reprehenderit soluta, blanditiis eum fuga quae illum delectus perferendis voluptates corrupti dolor cum deleniti fugiat sit inventore nihil alias quia sed. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam reprehenderit soluta, blanditiis eum fuga quae illum delectus perferendis voluptates corrupti dolor cum deleniti fugiat sit inventore nihil alias quia sed. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam reprehenderit soluta, blanditiis eum fuga quae illum delectus perferendis voluptates corrupti dolor cum deleniti fugiat sit inventore nihil alias quia sed. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam reprehenderit soluta, blanditiis eum fuga quae illum delectus perferendis voluptates corrupti dolor cum deleniti fugiat sit inventore nihil alias quia sed. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam reprehenderit soluta, blanditiis eum fuga quae illum delectus perferendis voluptates corrupti dolor cum deleniti fugiat sit inventore nihil alias quia sed. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam reprehenderit soluta, blanditiis eum fuga quae illum delectus perferendis voluptates corrupti dolor cum deleniti fugiat sit inventore nihil alias quia sed. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam reprehenderit soluta, blanditiis eum fuga quae illum delectus perferendis voluptates corrupti dolor cum deleniti fugiat sit inventore nihil alias quia sed. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam reprehenderit soluta, blanditiis eum fuga quae illum delectus perferendis voluptates corrupti dolor cum deleniti fugiat sit inventore nihil alias quia sed. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam reprehenderit soluta, blanditiis eum fuga quae illum delectus perferendis voluptates corrupti dolor cum deleniti fugiat sit inventore nihil alias quia sed. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam reprehenderit soluta, blanditiis eum fuga quae illum delectus perferendis voluptates corrupti dolor cum deleniti fugiat sit inventore nihil alias quia sed.
  </p>
</main>