1

我正在尝试重新创建一种在用户滚动时显示图像不同部分的方法。这个页面上有几个例子：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>

但仅此一项只会给它一个背景。滚动经过背景时，背景不会滚动并显示图像的不同部分。

4

2 回答 2

3

background: center center fixed no-repeat有fixed附件而不是scroll附件。scroll滚动页面时将移动背景图像，以便图像“在滚动过去时不会滚动并显示图像的不同部分”。使用fixedunderbackground:或 asbackground-attachment: fixed;将允许背景图像“在滚动经过时显示图像的不同部分”。

于 2013-03-31T17:32:01.620 回答
2

看起来效果是围绕 <section> 元素构建的

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;
  }
}
于 2013-03-31T17:46:19.900 回答