图像效果,CSS

时间:2013-03-31 17:18:10

标签: css

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

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

2 个答案:

答案 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;
  }
}