CSS 背景图像
CSS 背景图片详解 · 难度：入门 · +10XP
CSS 背景图片详解
background-image 是 CSS 中最常用的背景属性之一，用于为元素设置一张或多张背景图片。配合其他背景属性，可以创建出丰富的视觉效果，从简单的装饰到复杂的叠加效果。
基本用法
/* 单张背景图片 */
.hero {
background-image: url('/images/hero-bg.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 400px;
}
/* 简写形式 */
.hero {
background: url('/images/hero-bg.jpg') center/cover no-repeat;
height: 400px;
}
多张背景图片叠加
CSS 支持在同一个元素上叠加多张背景图片，用逗号分隔。先定义的图片在上层：
/* 渐变遮罩 + 背景图片 */
.overlay-banner {
background-image:
linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3)),
url('/images/banner.jpg');
background-size: auto, cover;
background-position: center;
height: 500px;
}
/* 三张图片叠加：纹理 + 图案 + 渐变 */
.textured {
background-image:
url('/images/texture.png'),
url('/images/pattern.svg'),
linear-gradient(to right, #ff6b6b, #4ecdc4);
background-repeat: repeat, no-repeat, no-repeat;
background-size: 200px, contain, cover;
}
背景图片尺寸 background-size
| 值 | 行为 | 适用场景 |
|---|---|---|
| cover | 缩放覆盖整个容器（可能裁剪） | 全屏横幅、Hero 区域 |
| contain | 缩放至完整显示（可能有留白） | 产品展示图、Logo 背景 |
| 100% auto | 宽度撑满，高度自适应 | 横向拼接图片 |
| auto 100% | 高度撑满，宽度自适应 | 竖向拼接图片 |
| 200px 150px | 固定尺寸 | 重复纹理、图标背景 |
背景定位 background-position
/* 关键字定位 */
.bg { background-position: center center; }
.bg { background-position: top right; }
.bg { background-position: left bottom; }
/* 精确像素定位 */
.bg { background-position: 50px 100px; } /* 左 50px, 上 100px */
/* 百分比定位 */
.bg { background-position: 50% 50%; } /* 居中，等价于 center center */
背景固定（视差效果）
.parallax {
background-image: url('/images/scene.jpg');
background-attachment: fixed; /* 背景固定不随滚动 */
background-size: cover;
background-position: center;
height: 100vh;
}渐变背景
background-image 不仅支持图片，还可以使用渐变：
/* 线性渐变 */
.gradient-hero {
background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
/* 径向渐变 */
.spotlight {
background-image: radial-gradient(circle at center, #fff 0%, #333 80%);
}
/* 图片 + 渐变组合 */
.hero-fancy {
background-image:
linear-gradient(to right, rgba(0,0,0,0.8), transparent 60%),
url('/images/hero.jpg');
background-size: cover;
}
背景属性速查表
| 属性 | 作用 | 示例 |
|---|---|---|
| background-image | 设置背景图片或渐变 | url('bg.jpg') |
| background-size | 背景尺寸 | cover / contain / 200px 100px |
| background-position | 背景定位 | center / top right / 50% 50% |
| background-repeat | 背景重复 | no-repeat / repeat-x / repeat-y |
| background-attachment | 背景附着 | scroll / fixed / local |
| background-origin | 背景定位原点 | padding-box / border-box / content-box |
| background-clip | 背景裁剪区域 | border-box / padding-box / content-box |
| background-blend-mode | 混合模式 | multiply / overlay / screen |
???? 练习
- 使用 background-image 和 cover 创建一个全屏 Hero 横幅
- 叠加半透明渐变遮罩在一张背景图片上
- 使用 background-attachment: fixed 实现视差滚动效果
- 为元素设置两张背景图（纹理 + 渐变）并分别控制其重复和尺寸
- 尝试 background-blend-mode 让背景图与背景色混合