深入掌握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>

运行结果：