CSS: CSS 背景
背景样式是美化网页的重要工具。CSS 提供了一系列背景属性，让你可以控制元素的背景颜色、背景图像、图像重复方式、尺寸和位置等。
背景属性速查表
| 属性 | 常用值 | 作用 |
|---|---|---|
background-color |
#f5f5f5, red, rgba(255,0,0,0.3) |
背景颜色 |
background-image |
url("bg.jpg"), linear-gradient(...) |
背景图片或渐变 |
background-repeat |
no-repeat, repeat, repeat-x, repeat-y |
背景重复方式 |
background-position |
center, top left, 50% 50% |
背景图像位置 |
background-size |
cover, contain, 100% auto |
背景图像尺寸 |
background-attachment |
scroll, fixed, local |
背景是否随页面滚动 |
background |
#333 url("bg.jpg") no-repeat center |
简写属性，可组合多个 |
1. 背景颜色 background-color
background-color 设置元素的背景颜色，支持任何有效的颜色值：
▶ 示例
HTML
<style>
.box {
background-color: #f5f5f5;
}
.highlight {
background-color: rgba(255, 255, 0, 0.3); /* 半透明黄色 */
}
</style>
<div class="box">这是一个盒子元素，用于展示盒模型相关样式效果</div>
<div class="highlight">这段文字有高亮背景效果</div>
2. 背景图像 background-image
background-image 为元素设置背景图片：
▶ 示例
HTML
<style>
.banner {
background-image: url("/assets/images/tutorials/css-banner.jpg");
height: 200px;
background-size: cover;
background-position: center;
}
</style>
<div class="banner">横幅广告区域内容展示</div>
可以设置多个背景图像，用逗号分隔，前面的在上层：
▶ 示例
HTML
<style>
.multi-bg {
background-image: url("/assets/images/tutorials/css-star.png"), url("/assets/images/tutorials/css-bg.jpg");
height: 200px;
background-size: 50px, cover;
background-repeat: no-repeat, repeat;
background-position: center, top left;
}
</style>
<div class="multi-bg">多层背景叠加效果展示</div>
(1) 关于背景图 vs <img> 标签
- 背景图：适合装饰性图片，不影响内容语义
<img>标签：适合有内容意义的图片（产品图、文章配图等），对 SEO 和可访问性友好
3. 背景重复 background-repeat
控制背景图像是否重复平铺：
▶ 示例
HTML
<style>
.no-repeat {
background-repeat: no-repeat; /* 不重复 */
}
.repeat-x {
background-repeat: repeat-x; /* 水平重复 */
}
.repeat-y {
background-repeat: repeat-y; /* 垂直重复 */
}
.repeat {
background-repeat: repeat; /* 默认，水平和垂直都重复 */
}
</style>
<div class="no-repeat">不重复背景图</div>
<div class="repeat-x">水平平铺背景</div>
<div class="repeat-y">垂直平铺背景</div>
<div class="repeat">完全平铺背景</div>
4. 背景尺寸 background-size
控制背景图像的尺寸大小：
▶ 示例
HTML
<style>
.cover {
background-size: cover; /* 覆盖整个区域，可能裁剪图片 */
}
</style>
> **⚠️ 注意性能：** 大尺寸背景图会拖慢页面加载。建议先用 CSS 压缩背景图尺寸到合适大小，再用 `background-size: cover`。一张 2000px 的背景图比 800px 的多消耗几倍带宽。
.contain {
background-size: contain; /* 完整显示图片，可能留空白 */
}
.custom {
background-size: 100px 50%; /* 自定义宽高 */
}
</style>
<div class="cover">背景图覆盖容器</div>
<div class="contain">背景图完整显示</div>
<div class="custom">自定义背景设置</div>
cover 和 contain 是最常用的两个值：
cover：让背景图铺满整个容器，比例不变，超出的部分会被裁剪contain：让背景图完整显示，比例不变，可能留出空白区域
5. 背景位置 background-position
控制背景图像在元素中的起始位置：
▶ 示例
HTML
<style>
/* 使用关键词 */
.center {
background-position: center;
}
.top-right {
background-position: top right;
}
/* 使用百分比 */
.position-percent {
background-position: 50% 50%; /* 居中 */
}
/* 使用像素 */
.position-px {
background-position: 20px 30px;
}
</style>
<div class="center">水平居中的内容</div>
<div class="top-right">Top right</div>
<span class="demo-top">顶部内容</span>
<div class="position-percent">Position percent</div>
<div class="position-px">Position px</div>
关键词组合：
- 水平：left、center、right
- 垂直：top、center、bottom
- 可以只写一个值，另一个默认为 center
6. 背景固定 background-attachment
控制背景图像是跟随页面滚动还是固定不动：
▶ 示例
HTML
<style>
.scroll-bg {
background-attachment: scroll; /* 默认，跟随滚动 */
}
.fixed-bg {
background-attachment: fixed; /* 固定不动，常用于视差效果 */
}
</style>
<div class="scroll-bg">随页面滚动背景</div>
<div class="fixed-bg">固定不动的背景</div>
background-attachment: fixed 非常适合做"视差滚动"效果——背景固定，内容滚动，产生一种深度感。
7. 背景简写属性 background
📌 简写顺序： background 简写的标准顺序是：color image repeat attachment position。
background: #fff url(bg.jpg) no-repeat fixed center; 就是完整写法。
background 是背景相关属性的简写形式，可以在一个声明中设置所有背景属性：
▶ 示例
HTML
<style>
.card {
background: #fff url("bg.jpg") no-repeat center / cover fixed;
}
</style>
<div class="card">Card</div>
<span class="demo-center">居中内容</span>
<span class="demo-cover">覆盖模式</span>
顺序建议（虽然不是必须，但按这个顺序易读性高）：
CSS
background: color image repeat position / size attachment;
注意：同时设置 background-position 和 background-size 时，两者之间要用斜杠 / 分隔，且位置在前、尺寸在后。
8. 综合示例
(1) 线性渐变示例
HTML
<style>
.gradient-box {
width: 480px;
height: 80px;
border: 1px solid;
margin-bottom: 1rem;
}
.bg1 { background: linear-gradient(to right, red, yellow, green); }
.bg2 { background: linear-gradient(to top, red 60%, yellow); }
.bg3 { background: linear-gradient(to left bottom, #00edf5, #ff0000); }
</style>
<div class="gradient-box bg1">从左到右：红→黄→绿</div>
<div class="gradient-box bg2">从下到上：红60%+黄</div>
<div class="gradient-box bg3">左上到右下：蓝→红</div>
(2) 背景综合示例
HTML
<style>
.hero-section {
/* 分开写 */
background-color: #1a1a2e;
background-image: url("hero-bg.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
/* 相当于简写为 */
.hero-section {
background: #1a1a2e url("hero-bg.jpg") no-repeat center / cover fixed;
}
</style>
<div class="hero-section">网站主打区域展示</div>
<span class="demo-center">居中内容</span>
<span class="demo-center">居中内容</span>
<span class="demo-cover">覆盖模式</span>
❓ 常见问题
Q background 简写的顺序是什么？
A 标准顺序是：color image repeat attachment position。例如
background: #fff url(bg.jpg) no-repeat fixed center;。如果某个值不写，会使用默认值，但建议写完整避免混淆。Q background-size: cover 和 contain 有什么区别？
A cover 会拉伸或裁剪图片以完全覆盖容器（可能被裁剪），contain 会完整显示整张图片（可能有空白区域）。想让背景填满不留白用 cover，想看到完整图片用 contain。
Q 可以用多张背景图吗？
A 可以，用逗号分隔多组 background 值，先写的显示在上层。例如
background: url(overlay.png), url(bg.jpg);。经常配合渐变一起用做叠加效果。📖 小节
- CSS 背景属性非常丰富——你可以设置纯色背景、图片背景、控制图片的重复方式、尺寸大小、位置以及是否固定
- 其中
background-size: cover和background-position: center是最常用的组合，几乎成了"标配"，能让背景图在各种屏幕上都表现良好
📝 作业
- 创建一个页面，顶部有一个全屏宽的大图 Banner（使用
background简写属性设置），要求图片居中铺满不重复。 - 使用
background-attachment: fixed创建一个有"视差"效果的页面——至少包含两个区块，背景图固定，内容可以滚动。 - 创建一个"背景图叠加"案例：在同一个元素上设置两张背景图（一张渐变半透明遮罩 + 一张底图）。
