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

这个问题对于你们中的一些CSS大师来说应该很简单。至少我希望是这样。我只想知道CSS是什么样子的，它实现了这个效果：

---

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

如果右键单击页面并选择“检查元素”，您将发现这些背景图像的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;

您特别感兴趣的是最后一个属性“背景附件”

请参见此处此属性的文档：

“背景附件”属性设置 背景图像是固定的或与页面的其余部分一起滚动

---

干杯

试试这样：

html:

---

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

html:

---

您正在寻找视差滚动。太棒了，谢谢。将立即执行Google fu。@user3019837无论你是谁，回答很好。欢迎来到社区。一群试图帮助的人。顺便说一下，这里有一个社交网站。宾果！非常聪明。谢谢。有什么特别的原因使背景图像成为内联样式吗？一些我不知道的聪明把戏？哈哈，我很欣赏，但我没有被固定的背景弄糊涂。而是前景在固定背景上创建一种透明遮罩。对不起，如果我的问题让人困惑，我不知道我在问什么，直到有人在评论中说“视差滚动”。

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

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

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

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