CSS - 固定背景附件使白色条出现在某些滚动位置

Question

我有一个标题，其背景设置为background-attachment: fixed;，但这会在页面顶部的某些滚动位置出现一条白色条带（背景模糊，因此条带也模糊，但它仍然可见）。

这是它目前的样子；顶部有那种白光，就是我说的那条带

我现在的代码是这样的（如果你运行 sn-p，请全屏查看，因为我还没有让它与移动设备兼容）：编辑Codepen

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 1.02em;
}

html,
body {
  height: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1.5em;
  line-height: 2em;
}

.container {
  margin: 0 auto;
  width: 80vw;
}

blockquote {
  box-sizing: content-box;
  position: relative;
  margin: 0 auto;
  display: block;
  padding-left: 30px;
  font-size: 1.5em;
  font-style: italic;
  color: #4a413c;
  border-left: 7px solid rgba(74, 65, 60, 0.5);
  quotes: "“" "”" "‘" "’";
  padding-bottom: 1.75em;
}

blockquote::before {
  position: absolute;
  top: 0.55em;
  left: -0.5em;
  content: open-quote;
  line-height: 0.2em;
  font-style: normal;
  font-size: 5em;
  font-family: 'Adobe Caslon Pro', serif;
  color: #4a413c;
}

blockquote::after {
  position: absolute;
  right: 0;
  bottom: 0;
  content: attr(data-author);
  font-style: italic;
  font-size: 0.75em;
  color: 4a413c;
}


/* Header */

header {
  position: relative;
  width: 100%;
  height: 60%;
  padding: 50px 100px;
  text-align: center;
  overflow: hidden;
  color: white;
  font-size: 1.5em;
  margin-bottom: 50px;
}

header.no-margin {
  margin-bottom: 0;
}

header .container {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%)
}

header .container h1 {
  position: relative;
  display: inline-block;
  font-weight: 300;
}

header .container h1::after {
  position: absolute;
  bottom: 1px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  content: '';
  width: 80%;
  height: 2px;
  border-bottom: 2px solid white;
}

header .container a {
  color: inherit;
  font-size: inherit;
  text-decoration: inherit;
  -webkit-transition: all 0.75s 0s;
  transition: all 0.75s 0s;
  border-bottom: 2px solid transparent;
}

header .container nav ul {
  list-style: none;
}

header nav ul li {
  display: inline-block;
  padding: 5px 30px;
}

header nav ul li a:hover {
  border-bottom: 2px solid white;
}

header .container p {
  width: 40%;
  margin: 0 auto;
}


/* Header Background */

.header::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -100;
  content: '';
  display: block;
  min-height: 100vh;
  width: 100%;
  background-image: -webkit-radial-gradient(center ellipse, rgba(0, 0, 0, 0.3) 27%, rgba(0, 0, 0, 1) 100%), url(https://placeimg.com/640/480/any);
  background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3) 27%, rgba(0, 0, 0, 1) 100%), url(https://placeimg.com/640/480/any);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  -webkit-filter: blur(7px) saturate(90%) brightness(120%) contrast(125%);
          filter: blur(7px) saturate(90%) brightness(120%) contrast(125%);
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

section.quote {
  position: relative;
  min-height: 40vh;
}

section.quote blockquote {
  position: absolute;
  width: 50%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.section.latest {
  display: block;
  margin: 0 auto;
  clear: both;
}

div.latest {
  padding: 10px;
  position: relative;
  width: 25vw;
  height: 25vw;
  overflow: hidden;
  float: left;
  background-size: cover;
  background-position: center center;
  background-attachment: scroll;
  margin: 5px;
}

div.latest::after {
  content: '';
  clear: both;
}

<header class="header no-margin">
  <div class="container">
    <nav>
      <ul>
        <li><a href="#">Artwork</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Social</a></li>
        <li><a href="#">Comission</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <h1><a href="index.html">Blog Title</a></h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</header>

<div class="container">
  <section class="quote">
    <blockquote data-author="Pablo Picasso">
      The meaning of life is to find your gift. The purpose of life is to give it away.
    </blockquote>
  </section>
  <main>
    <section class="section latest">
      <h2>Latest Artwork</h2>
      <div class="latest" style="background-image: url(https://placeimg.com/640/480/any);">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula tempus neque ut faucibus. Integer quam arcu, dictum in mattis nec, dapibus sed libero. Nam condimentum convallis elit eget placerat. Proin consectetur enim nulla, non hendrerit ante
        bibendum in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam commodo velit sapien, vitae tempor neque faucibus et.
      </div>
      <div class="latest" style="background-image: url(https://placeimg.com/641/450/any);">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula tempus neque ut faucibus. Integer quam arcu, dictum in mattis nec, dapibus sed libero. Nam condimentum convallis elit eget placerat. Proin consectetur enim nulla, non hendrerit ante
        bibendum in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam commodo velit sapien, vitae tempor neque faucibus et.
      </div>
      <div class="latest" style="background-image: url(https://placeimg.com/653/470/any);">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula tempus neque ut faucibus. Integer quam arcu, dictum in mattis nec, dapibus sed libero. Nam condimentum convallis elit eget placerat. Proin consectetur enim nulla, non hendrerit ante
        bibendum in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam commodo velit sapien, vitae tempor neque faucibus et.
      </div>
    </section>
    <section class="section">
      <h2>Latest Posts</h2>
    </section>
  </main>
</div>

要查看条带，请向下滚动，直到屏幕上只有一个小标题。

当您将background-attachment: fixed; 更改为background-attachment: scroll; 时，条带会消失，但我想保持固定。

我觉得我忽略了某些东西，但我想不出任何可能导致此问题的原因，那么导致此问题的原因是什么，我该如何解决？

Answer 1

我是 parallax CSS 的新手（它在我的 list-o-things-to-grok 中），但我认为问题在于当用户滚动内容时您正在向下翻译标题（以及因此它的背景） up（这就是产生视差效果的原因）。也许如果您调整标题的大小，使其顶部位于视口上方，当它向下滚动时，您将看不到白色。