に設定された背景を持つヘッダーがありますが、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;、固定したままにしておきたいです。
何かを見落としているように感じますが、これを引き起こしている可能性のあるものは何も考えられないので、この問題の原因は何ですか?どうすれば修正できますか?