CSS 背景样式是美化网页的基础，通过background系列属性可快速设置页面背景颜色、背景图片及图片展示方式。本文结合极简实战代码，详解背景颜色、背景图片、重复方式、尺寸控制的核心用法，新手可直接复制上手。
一、CSS 背景样式核心代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS背景样式实战</title>
<style type="text/css">
/* 控制body的背景样式 */
body {
/* 1. 背景颜色：浅黄色 */
background-color: lightyellow;
/* 2. 背景图片：指定本地图片路径 */
background-image: url(img/img1.png);
/* 3. 背景图片重复方式：平铺 */
background-repeat: repeat;
/* 4. 背景图片尺寸：宽200px，高200px */
background-size: 200px 200px;
}
</style>
</head>
<body>
<!– 页面内容（背景样式作用于整个body） –>
</body>
</html>
二、核心背景属性详细说明
| background-color | 背景颜色（覆盖图片下层） | 颜色名：lightyellow、red；十六进制：#fff；RGB：rgb(255,255,240) |
| background-image | 背景图片路径 | 本地路径：url(img/img1.png)；网络路径：url(2026-03-19qzmfdmzhwqf.png) |
| background-repeat | 图片重复方式 | repeat：默认，全屏平铺；no-repeat：不重复；repeat-x：水平平铺；repeat-y：垂直平铺 |
| background-size | 背景图片尺寸 | 固定尺寸：200px 200px；等比缩放：cover（铺满容器，裁剪部分）、contain（完整显示，可能留空）；百分比：50% 50% |
实用扩展：背景图片不重复 + 居中
body {
background-color: lightyellow;
background-image: url(img/img1.png);
background-repeat: no-repeat; /* 图片不重复 */
background-size: 200px 200px;
background-position: center center; /* 图片居中显示 */
}
三、关键注意事项
- 本地图片路径：url(img/img1.png) 表示当前 HTML 文件同级的img文件夹下的img1.png；
- 路径错误会导致图片不显示，此时仅显示background-color设置的背景色。
/* 简写：颜色 + 图片 + 重复 + 尺寸（顺序可调整） */
background: lightyellow url(img/img1.png) repeat;
background-size: 200px 200px; /* size需单独写，暂不支持简写在background中 */
四、典型应用场景
总结
