如何使用CSS在静态背景图像上创建滚动窗口？

Question

对于你们这些CSS专家来说，这个问题应该很容易。至少我希望是这样。我想知道的是CSS看起来是什么来实现这种效果：

http://www.nodeconf.com/

如果您滚动该页面，您可以看到他们是如何创建这个“切口”的，您可以滚动到背景图像的不同部分。每个狭缝似乎都有不同的图像。我觉得它真的很酷但不知道如何实现类似的东西。这种效果是否需要使用JavaScript？如果是这样，它有多复杂？

Answer 1

从源头上看，我认为它更像是这样：

http://jsfiddle.net/WZm9Z/

HTML：

<div class="image-block" style="background:url(http://placekitten.com/1543/1024) no-repeat center center fixed;"></div>

CSS：

.image-block {
    width: 100%;
    height: 80px;
}

Answer 2

尝试这样的事情：

http://jsfiddle.net/kx3cP/

HTML：

<div class="background"><img src="http://placekitten.com/1800/950" alt=""></div>
<div class="content"></div>
<div class="content"></div>

CSS：

.background { z-index: -9999; position:fixed; }
.content {background: black; width 50%; height:50em; margin:2em;}

Answer 3

如果右键单击页面并选择“检查元素”，您会发现这些背景图像的CSS是：

  background: url(images/aBR9P1476.jpg) no-repeat center center fixed;

这基本上是简写：

  background-image:url(images/aBR9P1476.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;

您特别感兴趣的是最后一个属性“background-attachment”。

请在此处查看此属性的文档： http://www.w3schools.com/cssref/pr_background-attachment.asp

  

background-attachment属性设置是否为   背景图像是固定的，或与页面的其余部分一起滚动。

干杯