深入掌握CSS背景图片：从基础到实战
背景图片：
本文将通过系统化的讲解+实战案例，帮助读者彻底掌握CSS背景图片的六大核心知识点。每个知识点都包含对比演示和记忆技巧，建议结合代码实操学习。
一、背景图片基础设置
- 使用
background-image（路径）属性设置背景图
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 1000px;height: 1000px;background-image: url(./images/haimian-baby.jpg);background-color: #00f6d9;}</style>
</head>
<body><div>div 标签</div>
</body>
</html>运行结果：
注意事项：
- 必须设置容器尺寸（width/height），否则不可见
- 默认情况下图片会平铺满整个盒子
二、背景平铺模式详解
通过background-repeat控制平铺方式：
| 属性值 | 效果描述 | 适用场景 |
|---|---|---|
| repeat | 默认双向平铺 | 纹理/图案背景 |
| no-repeat | 禁止平铺 | 独立展示的图片 |
| repeat-x | 水平平铺 | 横向渐变/装饰线条 |
| repeat-y | 垂直平铺 | 纵向装饰元素 |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景图片的平铺方式</title><style>body{display: flex;}.one{width: 500px;height: 500px;background-image: url(./images/haimian-baby.jpg);background-color: #00f6d9;background-repeat: no-repeat;}.two{width: 500px;height: 500px;background-image: url(./images/haimian-baby.jpg);background-color: #00f6d9;background-repeat: repeat-x;margin-left: 50px;}.three{width: 500px;height: 500px;background-image: url(./images/haimian-baby.jpg);background-color: #00f6d9;background-repeat: repeat-y; margin-left: 50px;}.four{width: 500px;height: 500px;background-image: url(./images/haimian-baby.jpg);background-color: #00f6d9;background-repeat: no-repeat;background-repeat:repeat;margin-left: 50px;}</style>
</head>
<body><div class="one">no-repeat不平铺</div><div class="two">repeat-水平平铺</div><div class="three">repeat-y竖直平铺</div><div class="four">repeat平铺</div>
</body>
</html>运行结果：
三、精准定位背景图片
通过background-position控制显示位置：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景图位置</title><style>div {width: 1000px;height: 1000px;background-color: #00f6d9;background-image: url(./images/haimian-baby.jpg);background-repeat: no-repeat;/* 左上角 *//* background-position: 0 0;background-position: left top; *//* 右下角 *//* background-position: right bottom; *//* 垂直和水平都居中 */background-position: center;/* 水平：正数向右，负数向左*//* background-position: 100px 200px; *//* background-position: center 50px; *//* 关键字书写可以颠倒位置 *//* background-position: top right; *//* 关键字可以只写一个，另一个默认居中 *//* background-position: left; *//* 只写一个数字表示水平方向，垂直方向居中 *//* background-position: 100px; */}</style>
</head>
<body><div></div>
</body>
</html>运行结果：
四、背景缩放高级技巧
background-size的三种核心用法：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景图缩放</title><style>div {/* 工作中图片的比例和盒子的比例一致 */width: 400px;height: 300px;background-color: #df9595;background-image: url(./images/haimian-baby.jpg);background-repeat: no-repeat;/* contain：缩放图片以适应背景区域，可能会留白。 */background-size: contain;/* cover：缩放图片以完全覆盖背景区域，可能会裁剪图片。 *//* background-size: cover; *//* 100% 图片的宽度和盒子的宽度一样，图片的高度按照图片比例等比例缩放 *//* background-size: 100%; */}</style>
</head>
<body><div></div>
</body>
</html>运行结果：
五、视差滚动效果实现
通过background-attachment控制滚动行为：
| 属性值 | 滚动效果 | 性能影响 |
|---|---|---|
| scroll | 随元素滚动（默认） | 低 |
| fixed | 相对视口固定 | 中 |
| local | 随元素内容滚动 | 高 |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景图片固定</title><style>div{height: 400px;background-image: url(./images/haimian-baby.jpg);background-repeat: no-repeat;/* 背景图固定 */background-attachment: fixed;overflow:scroll;}</style>
</head>
<body><div><p>测试文字，阿辉十多个贵啊高度公司iu广东省法规是丢苟富贵IG对对对对</p><p>测试文字，阿辉十多个贵啊高度公司iu广东省法规是丢苟富贵IG对对对对</p><p>测试文字，阿辉十多个贵啊高度公司iu广东省法规是丢苟富贵IG对对对对</p><p>测试文字，阿辉十多个贵啊高度公司iu广东省法规是丢苟富贵IG对对对对</p><p>测试文字，阿辉十多个贵啊高度公司iu广东省法规是丢苟富贵IG对对对对</p><p>测试文字，阿辉十多个贵啊高度公司iu广东省法规是丢苟富贵IG对对对对</p><p>测试文字，阿辉十多个贵啊高度公司iu广东省法规是丢苟富贵IG对对对对</p><p>测试文字，阿辉十多个贵啊高度公司iu广东省法规是丢苟富贵IG对对对对</p><p>测试文字，阿辉十多个贵啊高度公司iu广东省法规是丢苟富贵IG对对对对</p><p>测试文字，阿辉十多个贵啊高度公司iu广东省法规是丢苟富贵IG对对对对</p><p>测试文字，阿辉十多个贵啊高度公司iu广东省法规是丢苟富贵IG对对对对</p><p>测试文字，阿辉十多个贵啊高度公司iu广东省法规是丢苟富贵IG对对对对</p><p>测试文字，阿辉十多个贵啊高度公司iu广东省法规是丢苟富贵IG对对对对</p><p>测试文字，阿辉十多个贵啊高度公司iu广东省法规是丢苟富贵IG对对对对</p><p>测试文字，阿辉十多个贵啊高度公司iu广东省法规是丢苟富贵IG对对对对</p><p>测试文字，阿辉十多个贵啊高度公司iu广东省法规是丢苟富贵IG对对对对</p>
</div>
</body>
</html>运行结果：
滚动文字的时候，图片不会和文字一起滚动
六、复合属性高效写法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景复合属性</title><style>div{width: 2000px;height: 2000px;/* 背景色，背景图 背景图平铺方式 背景图位置 /背景图缩放 背景图固定(没有顺序之分) */background:pink url(./images/haimian-baby.jpg) repeat-y center /auto;}</style>
</head>
<body><div></div>
</body>
</html>运行结果：
总结：
(1)background-image: url(../imges/img1.jpg);
(2)background-repeat
作用：控制背景图片是否重复平铺。
常用值：
no-repeat：背景图片不重复。
repeat：背景图片在水平和垂直方向上重复。
repeat-x：背景图片仅在水平方向上重复。
repeat-y：背景图片仅在垂直方向上重复。
(3)background-position
作用：设置背景图片的位置。
常用值：
center：背景图片居中显示。
top、bottom、left、right：背景图片分别位于顶部、底部、左侧、右侧。
x% y%：使用百分比指定位置，例如 50% 50% 表示居中。
xpos ypos：使用具体的像素值或长度值指定位置，例如 10px 20px
(4)background-size
作用：定义背景图片的大小。
常用值：
auto：保持图片的原始尺寸。
cover：缩放图片以完全覆盖背景区域，可能会裁剪图片。
contain：缩放图片以适应背景区域，可能会留白。
width% height%：使用百分比指定宽度和高度，例如 100% 100%。
widthpx heightpx：使用具体的像素值指定宽度和高度，例如 300px 200px。（用得少）
(5)background-attachment
作用：定义背景图片是否随页面滚动而移动。
常用值：
fixed：背景图片固定在视口中，不随页面滚动。
(6)background:背景复合属性（空格隔开各个属性，没有顺序之分）
属性值：背景色，背景图，背景图平铺方式，背景图位置、背景图缩放 背景图固定