在网页开发中，“**
固定背景**”通常指的是：当用户滚动页面时，
背景图像或颜色保持不动（即“
固定”在视口中），而页面内容在
背景之上滚动。这种效果也被称为 **视差
背景（Parallax Background）** 或 **
固定背景滚动效果**。
---
### ✅ 实现
固定背景的方法
最常见且简单的方式是使用 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>
body {
margin: 0;
padding: 0;
font-family: 'Microsoft YaHei', sans-serif;
color: white;
height: 100vh;
/* 设置
固定背景 */
background-image: url('https://picsum.photos/1600/900'); /* 随机占位图 */
background-size: cover;
background-position: center;
background-attachment: fixed; /* 关键：让
背景固定 */
background-repeat: no-repeat;
}
.content {
background-color: rgba(0, 0, 0, 0.7); /* 半透明遮罩提升文字可读性 */
padding: 50px;
min-height: 200vh; /* 足够高的内容以便滚动 */
}
h1 {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}
</style>
</head>
<body>
<div class="content">
<h1>
固定背景演示</h1>
<p>向下滚动看看，
背景图片不会随页面移动！</p>
<p style="margin-top: 1000px;">已经到底啦～
背景是不是一直“钉”在背后？</p>
</div>
</body>
</html>
```
---
### 🔍 解释关键 CSS 属性：
| 属性 | 说明 |
|------|------|
| `background-image: url(...)` | 设置
背景图片 |
| `background-size: cover` | 图片缩放以完全覆盖容器，保持比例 |
| `background-position: center` | 将
背景居中对齐 |
| `background-repeat: no-repeat` | 防止图片重复平铺 |
| `background-attachment: fixed` | ⭐ 核心属性：使
背景相对于视口
固定，不随滚动 |
---
### 📱 移动端注意事项
⚠️ 在 **iOS Safari 和部分安卓浏览器** 上：
- `background-attachment: fixed` 可能失效或表现异常（尤其是性能问题）。
- 原因：移动端为优化滚动流畅度，默认禁用某些
固定背景行为。
#### ✅ 替代方案（适用于移动端）：
使用伪元素 + `transform` 模拟
固定背景：
```css
body {
margin: 0;
overflow-x: hidden;
}
.body-fixed-bg {
position: relative;
z-index: 1;
}
.body-fixed-bg::before {
content: "";
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background-image: url('https://picsum.photos/1600/900');
background-size: cover;
background-position: center;
z-index: -1;
transform: translateZ(0); /* 启用硬件加速 */
}
.content {
position: relative;
color: white;
background-color: rgba(0, 0, 0, 0.6);
padding: 50px;
min-height: 200vh;
}
```
```html
<div class="body-fixed-bg">
<div class="content">
<h1>兼容移动端的
固定背景</h1>
<p>即使在手机上也能看到类似 fixed 的
背景效果。</p>
</div>
</div>
```
> 💡 这种方式利用了 `position: fixed` 的特性来模拟 `background-attachment: fixed`，在移动端更可靠。
---
### 🎨 高级技巧：多层视差
背景
你可以创建多个
固定背景层，形成深度感（常用于视差滚动网站）：
```css
.parallax {
height: 500px;
overflow: hidden;
position: relative;
}
.parallax > * {
position: relative;
z-index: 2;
}
.parallax::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: url('https://picsum.photos/1600/900') center/cover no-repeat;
z-index: 1;
transform: translateY(var(--
scroll)) scale(1.1);
}
<script>
document.addEventListener("
scroll", () => {
document.querySelector(".parallax").style.setProperty(
"--
scroll", window.
scrollY * 0.5 + "px"
);
});
</script>
```
这会让
背景以比内容慢的速度滚动，产生“视差”效果。
---
### ❗ 常见问题与建议
| 问题 | 建议 |
|------|------|
|
背景图加载慢影响体验 | 使用压缩图片、懒加载或先展示纯色再渐显图片 |
| 文字看不清 | 添加半透明黑色遮罩层（如 `rgba(0,0,0,0.5)`）提高对比度 |
| 移动端卡顿 | 避免大图；启用硬件加速（`transform: translateZ(0)`） |
| SEO 和可访问性 | 不要用
背景图承载重要信息，应使用 `<img>` 标签并加 `alt` |
---
###
扫一扫
1044
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
