如何操作 - 视差滚动

了解如何使用 CSS 创建"parallax" 滚动效果。

视差

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

视差滚动演示

无视差滚动的演示

笔记：视差滚动并不总是适用于移动设备/智能手机。但是，您可以使用媒体查询来关闭移动设备上的效果（请参阅本页上的最后一个示例）。

如何创建视差滚动效果

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

像素示例

亲自试一试 »

上面的示例使用像素来设置图片的高度。如果要使用百分比（例如 100%）来使图片适合整个屏幕，请将视差容器的高度设置为 100%。笔记：您还必须申请height: 100%对于 <html> 和 <body>：

带百分比的示例

body, html {
height: 100%;
}

.parallax {
/* The image used */
background-image: url("img_parallax.jpg");

/* Full height */
height: 100%;

/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

亲自试一试 »

某些移动设备存在问题background-attachment: fixed。但是，您可以使用媒体查询来关闭移动设备的视差效果：

示例

/* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if needed */
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}

亲自试一试 »