如何创建：视差滚动

学习如何使用 CSS 创建“视差”滚动效果。

视差滚动

视差滚动是一种网站设计趋势，其中背景内容（例如图像）在滚动时的移动速度与前景内容不同。点击下面的链接，查看有视差滚动和没有视差滚动的网站之间的区别。

有视差滚动效果的演示

无视差滚动效果的演示

注意：视差滚动并不总是在移动设备/智能手机上有效。但是，您可以使用媒体查询在移动设备上关闭此效果（请参阅本页最后一个例子）。

如何创建视差滚动效果

使用一个容器元素，并向该容器添加一幅具有特定高度的背景图像。然后，使用 background-attachment: fixed 创建实际的视差效果。其他背景属性用于居中和完美缩放图像：

以像素为单位的实例

<style>

.parallax {
  /* 所用的图像 */
  background-image: url("img_parallax.jpg");

  /* 设置特定高度 */
  min-height: 500px;

  /* 创建视差滚动效果 */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>

<!-- Container element -->
<div class="parallax"></div>

亲自试一试

上面的例子使用像素来设置图像的高度。如果您想使用百分比，例如 100%，以使图像适合整个屏幕，请将视差容器的高度设置为 100%。注意：您还必须将 height: 100% 应用于 <html> 和 <body>：

以百分比为单位的实例

body, html {
  height: 100%;
}

.parallax {
  /* 所用的图像 */
  background-image: url("img_parallax.jpg");

  /* 全高 */
  height: 100%;

  /* 创建视差滚动效果 */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

亲自试一试

一些移动设备在使用 background-attachment: fixed 时会出现问题。但是，您可以使用媒体查询在移动设备上关闭视差效果：

实例

/* 关闭所有平板电脑和手机的视差滚动。如果需要，可以增加/减少像素 */
@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
}

亲自试一试

在上述代码中，当屏幕宽度小于或等于 1366 像素时，将关闭视差滚动效果，这对于大多数平板电脑和手机都是适用的。这是通过改变 .parallax 类的 background-attachment 属性从 fixed 到 scroll 来实现的。这样，背景图像就会随着页面的其余部分一起滚动，而不是固定在视口中。