视差滚动
创建于 2024-12-03 /
25
字体：
[默认]
[大]
[更大]
了解如何使用 CSS 创建 "视差" 滚动效果。
视差
视差滚动是一种网站趋势，其中背景内容（即图像）在滚动时以与前景内容不同的速度移动。 点击下面的链接查看有和没有视差滚动的网站之间的区别。
注释: 视差滚动并不总是适用于移动设备/智能手机。 但是，您可以使用媒体查询来关闭移动设备上的效果（参见本页的最后一个示例）。
如何创建视差滚动效果
使用容器元素并将背景图片添加到具有特定高度的容器中。 然后使用 background-attachment: fixed 创建实际的视差效果。 其他背景属性用于完美地居中和缩放图像:
像素示例
<style>.parallax {
/* 使用的图像 */
background-image: url("img_parallax.jpg");
/* 设置特定高度 */
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;
}
} 亲自试一试 »
0 人点赞过
