如果您还没有看到神秘酷炫的 Silverback 应用 预告页面，您应该去看看。大猩猩是 由 Jon Hicks 设计的（是的！与拥有酷炫的 身体边框技巧 的网站相同）。在您访问该网站时，请确保调整浏览器大小，以查看悬挂藤蔓的酷炫“视差”效果。该网站本身由 Paul Annett 设计。Paul 在 Think Vitamin 上写了一篇关于 如何创建该视差效果 的文章。
我想我会借鉴这个想法，并更详细地解释一下，并以略微不同的应用方式提供下载，供有兴趣的人下载。
什么是视差？
您可以将运动视差想象成您从移动的火车上向外看时所看到的东西。紧邻火车轨道的灌木丛会迅速掠过您的视线，而田野中吃草的牛群会显得缓慢地穿过您的视线，而背景中的山脉几乎不会移动。 视差与天文学特别相关。不仅因为科幻电影一直使用这种效果来创造酷炫的空间效果，而且因为这种效果是我们用来测量恒星距离我们太阳系有多远的工具。
带视差的多重背景
为了纪念这种令人惊叹的效果及其与科学的相关性，我创建了 星空。星空是一种全页面背景效果，包含三层。当您调整浏览器窗口大小时，远处的星星只会移动一点点，而近处的星星会移动得更快。这种效果是通过三个页面元素创建的，所有元素都占据整个浏览器窗口。主体（“背景”）、一个 div（“中景”）和另一个 div（“前景”）。
<body>
<div id="midground"></div>
<div id="foreground"></div>
</body>主体元素默认情况下将填充整个屏幕，但我们将必须使用绝对定位对另外两个 div 进行样式设置以实现相同的效果。
body {
background: url(images/background.png) repeat 5% 5%;
}
#midground {
background: url(images/midground.png) repeat 20% 20%;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 997;
}
#foreground {
background: url(images/foreground.png) repeat 90% 110%;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 998;
}中景和前景 PNG 文件都是 alpha 透明的，因此它们可以很好地叠加在一起。这里重要的是您在背景属性中看到的百分比值。这控制着水平和垂直位置，但在本示例的上下文中，您可以将其理解为“您想要它移动的速度”。还要注意，您可以超过 100%，这意味着它将以比调整浏览器窗口大小的速度更快的速度移动。
值得一提的是，这种效果在 IE 6 或更早版本中根本不会出现。在 PNG 错误和绝对定位错误之间，它根本不值得。 在我的示例中，我使用 条件样式表 来显示警告消息。
我的内容放在哪里？
这取决于您，请注意在我的 示例页面 中，右上角有一小部分内容。您可以做类似的事情。请记住，您构建的任何用来放置内容的区域都需要是绝对定位的，并且具有更高的 z-index 值。否则，绝对定位的前景和中景将覆盖您的内容区域，您将无法选择或点击任何内容（如果您能看到它的话）。
[下载示例]
.ZIP 文件包含星星的 Photoshop 文档。
酷！
超级酷。现在它只需要一些 JavaScript 闪烁的星星。
我也有视差效果了！
这真的很聪明！
很遗憾这种极好的效果只有在调整页面大小时才会显示。:)
我可能错了，但您在这个示例中需要使用绝对定位的唯一原因是因为您是在浏览器窗口的全高处进行效果，对吧？Silverback 网站没有使用与浏览器窗口全高相同的图像，因此不需要绝对定位。
不要忘记，您也可以将最深的背景图像应用于 html 元素本身，从而消除仅包含背景图像的一个 div。
顺便说一句，这真是一次不错的尝试...
@chipgrafx：部分正确... 这是因为这些元素需要彼此叠加。如果您不想在所有元素上都使用全高，您可以使用负边距将其他 div 叠加在一起，而不需要绝对定位。
如果您使用负边距来实现叠加，并在 IE 上进行 .png 攻击，这将非常有用。非常酷的技巧，Chris。
啊，是的。我刚注意到这些 div 是分开的。为什么不将前景 div 嵌套在中景 div 中？这样似乎可以减少一些 CSS。
不错的教程，我前几天在 Vitamin 上看到了关于它的内容，他们也有一个很棒的 教程 。很遗憾，就像 Flavia 说的那样，如果没有调整浏览器大小，就无法实现这种效果。
也许可以使用一些 JavaScript 来慢慢改变 CSS（如果它是内联的）？
我给它点赞，因为它很酷，并给它一个犹豫的手指，因为它实用性很差 :) - 注意到很好的 IE 警告，但它应该是 <!–[if lt IE 7]>，lte 表示小于或等于 IE7，因此我在 IE7 中也看到了警告消息。无论如何，这是一种很好的条件方法，用于显示消息。
说真的，这太棒了，可惜 IE6 不支持。我这个周末要实现它 :)
好吧，它可以在 IE6 中工作 - 它需要一点 JavaScript 风味来使它“重复”，但与此同时，它可以工作。我这个周末会尝试创建一个可用的示例。
这很酷。但我有一个问题，实际上有多少用户会在浏览您的网站时调整他们的窗口大小？当您必须向下滚动页面时，事情就不那么酷了。如果我们可以获得类似的效果，在滚动时工作，那将是一个更有用的效果。不是吗？
干得好。
这很酷 :)
我肯定会把它应用到一个新的项目中
我们能用 gif 代替 png 来实现吗？
超级酷。现在它只需要一些 JavaScript 闪烁的星星。
超级酷
惊人的效果！
感谢您的教程 - 我已经将它翻译成德语（希望这没问题？），您可以在我的博客 guru-20.info 上找到它。
示例下载链接不起作用 - 我认为您将 zip 文件放在比链接的目录更高一个目录中。
ByteBros
下载链接应该已修复。