CSS - 修复了使白色条带出现在某些滚动位置的背景附件
CSS - Fixed Background Attachment making white strip appears at some scroll positions
我有一个 header，它的背景设置为 background-attachment: fixed;，但这会使页面顶部的某些滚动位置出现白色条带（背景模糊） , 所以条带也是模糊的, 但它仍然可见)。
这是目前的样子；顶部有那种白光之类的东西，就是我说的那条带
我现在的代码是这样的（如果你 运行 代码段，请全屏查看，因为我还没有做到 mobile-compatible）：在 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>
要查看条带，请向下滚动直到屏幕上只有 header 的一小部分。
当您将 background-attachment: fixed; 更改为 background-attachment: scroll; 时，条带会消失，但我想保持不变。
我觉得我忽略了什么，但我想不出任何可能导致此问题的原因，那么是什么导致了这个问题，我该如何解决？
我是视差 CSS 的新手（它在我的 list-o-things-to-grok 上），但我认为问题是你正在翻译 header（因此它的背景）当用户向上滚动内容时（这就是产生视差效果的原因）。也许如果您调整 header 的大小，使其顶部位于视口上方，当它向下滚动时您将看不到白色。
我有一个 header，它的背景设置为 background-attachment: fixed;，但这会使页面顶部的某些滚动位置出现白色条带（背景模糊） , 所以条带也是模糊的, 但它仍然可见)。
我现在的代码是这样的（如果你 运行 代码段，请全屏查看，因为我还没有做到 mobile-compatible）：在 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>
要查看条带，请向下滚动直到屏幕上只有 header 的一小部分。
当您将 background-attachment: fixed; 更改为 background-attachment: scroll; 时，条带会消失，但我想保持不变。
我觉得我忽略了什么，但我想不出任何可能导致此问题的原因，那么是什么导致了这个问题，我该如何解决？
我是视差 CSS 的新手（它在我的 list-o-things-to-grok 上），但我认为问题是你正在翻译 header（因此它的背景）当用户向上滚动内容时（这就是产生视差效果的原因）。也许如果您调整 header 的大小，使其顶部位于视口上方，当它向下滚动时您将看不到白色。