我有一个标题，其背景设置为background-attachment: fixed;，但这会使页面顶部的某些滚动位置出现一条白色条带（背景模糊，因此条带也模糊，但仍然可见） .
这就是它目前的样子；顶部有那种白光，就是我说的那个带子
我现在的代码是这样的（如果你运行代码片段，请全屏查看，因为我还没有让它与移动设备兼容）：在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;，但我想保持固定。
我觉得我忽略了某些东西，但我想不出任何可能导致此问题的原因，那么导致此问题的原因是什么，我该如何解决？