如何 - CSS 视差滚动
学习如何使用 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>
/* 其他背景属性用于居中和缩放图像 */
background-position: center;
自己动手试一试 »
background-repeat: no-repeat;
background-size: cover;
body, html {
height: 100%;
}
.parallax {
/* 使用的图片 */
}
在上面的示例中，我们使用了像素来设置图像的高度。如果您想使用百分比，例如 100%，使图像适应整个屏幕，请将视差容器的高度设置为 100%。注意：您还必须为 <html> 和 <body> 应用 height: 100%。
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;
}
}
自己动手试一试 »
