如何 - 视差滚动
了解如何使用 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>
<!-- 容器元素 -->
<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;
}
}
尝试一下 »
