我正在尝试重新创建一种在用户滚动时显示图像不同部分的方法。此页面上有几个示例:http://apps.npr.org/unfit-for-work/?src=longreads&buffer_share=be155&utm_source=buffer
它是如何工作的?这是我到目前为止提取的内容:
h3#image1 {
background-image: url(story1/1.png);
display: block;
padding: 40px 0;
}
html.backgroundsize .wallpaper {
background: center center fixed no-repeat;
background-size: cover;
-webkit-background-size: cover;
}
和HTML:
<h3 id="image1" class="wallpaper">Something</h3>
但仅此一点只会给它一个背景。滚动浏览后,背景不会滚动显示图像的不同部分。
答案 0 :(得分:3)
background: center center fixed no-repeat
包含fixed
附件,而不是scroll
附件。当您滚动页面时,scroll
将移动背景图像,以便图像“滚动时不会滚动并显示图像的不同部分。”使用fixed
下的background:
或background-attachment: fixed;
,可以让背景图片“在滚动时显示图片的不同部分。”
答案 1 :(得分:2)
看起来效果是围绕&lt; section&gt;构建的。元件
<强> HTML 强>
<section>
<h3 id="hale-county" class="wallpaper">One In Four</h3>
...
</section>
<强> CSS 强>
//background image definition
h3#hale-county {
background-image: url(../img/hale-county-bus-152.jpg);
}
// wallpaper class is assigned to every h3 element within section
html.backgroundsize .wallpaper {
////// THIS PROPERTY IS IMPORTANT FOR THE EFFECT
background: center center fixed no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
@media only all and (max-device-width: 1024px) {
html.backgroundsize .wallpaper {
background-attachment: scroll;
}
}