视差滚动和背景固定是提升网页视觉表现力的常用技术，前者通过多层元素滚动速度差营造空间感，后者让背景在内容滚动时保持静止，二者都可以用HTML5结合CSS3实现，不需要依赖复杂的第三方库。
一、背景固定的实现方法
背景固定核心是使用CSS的background-attachment属性，该属性控制背景图像相对于视口或元素本身的滚动方式，当设置为fixed时，背景会固定在视口中，不随元素内容滚动。
基础实现示例
首先搭建HTML结构，创建一个包含内容的容器，设置背景图像：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景固定示例</title>
<style>
.fixed-bg {
height: 500px;
/* 设置背景图片 */
background-image: url('https://ipipp.com/bg.jpg');
/* 背景固定核心属性 */
background-attachment: fixed;
/* 背景覆盖整个容器 */
background-size: cover;
/* 背景居中显示 */
background-position: center;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.content {
height: 1500px;
padding: 20px;
line-height: 1.8;
}
</style>
</head>
<body>
<div class="fixed-bg">
这里是固定背景区域
</div>
<div class="content">
<p>这里是页面的其他内容，当滚动页面时，上方固定背景区域的背景图片不会随内容滚动而移动，始终保持静止状态。</p>
<p>可以继续添加更多内容，观察背景固定的效果。</p>
</div>
</body>
</html>
注意事项
- 移动端部分浏览器对
background-attachment: fixed支持不佳，可能需要通过JS模拟实现效果 - 如果元素本身有滚动容器，fixed背景会相对于该滚动容器固定，而非整个视口
二、视差滚动的实现方法
视差滚动的实现思路是给不同层级的元素设置不同的滚动速度，通常背景层滚动速度慢，前景层滚动速度快，通过transform: translateY()配合滚动事件监听，或者直接使用CSS的perspective和translateZ属性实现。
CSS 3D视差实现方案
这种方案不需要JS，利用CSS 3D变换让不同层级的元素在滚动时产生速度差：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视差滚动示例</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
/* 设置3D透视，值越小视差效果越明显 */
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax-container {
/* 开启3D变换 */
transform-style: preserve-3d;
}
.parallax-layer {
position: relative;
/* 不同层级设置不同的translateZ值，值越小滚动越慢 */
transform: translateZ(-1px) scale(2);
height: 500px;
background-image: url('https://ipipp.com/layer1.jpg');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 28px;
}
.normal-layer {
height: 500px;
padding: 40px;
line-height: 1.8;
background-color: #f5f5f5;
}
.layer-2 {
transform: translateZ(-2px) scale(3);
background-image: url('https://ipipp.com/layer2.jpg');
}
</style>
</head>
<body>
<div class="parallax-container">
<div class="parallax-layer">
远景层（滚动最慢）
</div>
<div class="normal-layer">
<p>这是正常滚动的内容层，滚动速度和页面滚动一致。</p>
<p>下方还有更慢的远景层，继续滚动查看效果。</p>
</div>
<div class="parallax-layer layer-2">
更远的远景层（滚动最慢）
</div>
<div class="normal-layer">
<p>更多内容区域，用于撑开页面高度，方便观察视差效果。</p>
</div>
</div>
</body>
</html>
JS监听滚动实现方案
如果需要更灵活的控制，可以通过JS监听滚动事件，动态调整元素位置：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS视差滚动示例</title>
<style>
.parallax-bg {
height: 600px;
background-image: url('https://ipipp.com/parallax-bg.jpg');
background-size: cover;
background-position: center;
position: relative;
}
.parallax-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 32px;
}
.page-content {
height: 2000px;
padding: 40px;
line-height: 1.8;
}
</style>
</head>
<body>
<div class="parallax-bg" id="parallaxBg">
<div class="parallax-content">视差滚动内容</div>
</div>
<div class="page-content">
<p>页面其他内容，滚动时背景区域的内容会以更慢的速度移动，形成视差效果。</p>
</div>
<script>
// 监听滚动事件
window.addEventListener('scroll', function() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const parallaxBg = document.getElementById('parallaxBg');
// 滚动速度系数，值越小背景移动越慢
const speed = 0.5;
// 调整背景位置，产生视差
parallaxBg.style.transform = `translateY(${scrollTop * speed}px)`;
});
</script>
</body>
</html>
三、两种效果的适配建议
| 效果类型 | 推荐实现方案 | 适配注意事项 |
|---|---|---|
| 背景固定 | CSS background-attachment: fixed | 移动端兼容性差，可针对移动端降级为滚动背景 |
| 视差滚动 | CSS 3D变换方案优先，复杂场景用JS方案 | 避免过度使用导致页面性能下降，注意层级z-index配置 |
实际开发中可以根据项目需求选择合适的实现方式，两种效果也可以结合使用，让页面视觉体验更丰富。如果需要在127.0.0.1本地环境测试，只需要将代码中的图片地址替换为本地路径即可正常运行。