Question

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

但仅此一点只会给它一个背景。滚动浏览后，背景不会滚动显示图像的不同部分。

Answer 1

background: center center fixed no-repeat包含fixed附件，而不是scroll附件。当您滚动页面时，scroll将移动背景图像，以便图像“滚动时不会滚动并显示图像的不同部分。”使用fixed下的background:或background-attachment: fixed;，可以让背景图片“在滚动时显示图片的不同部分。”

Answer 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;
  }
}

图像效果，CSS

2 个答案: