background-color设置背景颜色，支持多种颜色表示法，默认透明；2. background-image指定背景图像，可多图层堆叠；3. background-repeat控制图像重复方式；4. background-position定义图像位置；5. background-size调整图像尺寸，适用于响应式设计；6. background-attachment设置背景滚动行为；7. background-origin和background-clip控制背景定位与绘制区域；8. background简写属性可合并所有背景设置，提升代码效率。掌握这些属性可实现丰富视觉效果。
在CSS中，background 系列属性用于控制元素的背景样式。通过这些属性，可以设置背景颜色、背景图像、背景位置、重复方式、大小、固定或滚动等效果。合理使用 background 属性能让页面视觉更丰富、用户体验更佳。
1. background-color：设置背景颜色
该属性定义元素的背景颜色，可以使用颜色名称、十六进制值、RGB、RGBA、HSL 或 HSLA 表示颜色。
常见用法：background-color: red;background-color: #f0f0f0;-
background-color: rgba(0, 0, 0, 0.5);（半透明黑色）
注意：若未设置背景颜色，默认为透明（transparent），会显示父元素的背景。
2. background-image：设置背景图像
用于指定一个或多个背景图片。默认情况下，背景图会平铺（tile）以填满整个元素。
立即学习“前端免费学习笔记（深入）”；
语法示例：background-image: url('bg.jpg');-
background-image: none;（取消背景图） -
background-image: url('a.png'), url('b.png');（多背景图，从上到下堆叠）
支持多种图片格式如 JPG、PNG、SVG、WebP 等。
3. background-repeat：控制背景图重复方式
决定背景图像是否以及如何重复。常与 background-image 配合使用。
常用取值：-
repeat：横向和纵向都重复（默认） -
no-repeat：不重复，只显示一次 -
repeat-x：仅横向重复 -
repeat-y：仅纵向重复 -
space：图像尽可能重复，不留空隙也不裁剪 -
round：缩放图像以适应容器
例如：background-repeat: no-repeat; 常用于只展示一张完整的背景图。
4. background-position：设置背景图位置
定义背景图像的起始位置。可使用关键词、百分比或具体长度单位。
常见写法：background-position: center;background-position: top left;-
background-position: 50% 50%;（水平居中、垂直居中） -
background-position: 20px 10px;（距左20px，距上10px）
支持两个值：第一个是水平位置，第二个是垂直位置。
5. background-size：调整背景图尺寸
控制背景图像的大小，对响应式设计特别有用。
关键取值：-
auto：保持原始尺寸（默认） -
cover：等比例缩放图片，完全覆盖容器（可能裁剪） -
contain：等比例缩放，完整显示图片（可能留白） -
100% 100%：拉伸填满容器（可能变形） -
200px 150px：指定具体宽高
例如：background-size: cover; 常用于全屏背景图。
6. background-attachment：设置背景滚动行为
决定背景图像是随内容滚动还是固定不动。
主要取值：-
scroll：背景随元素内容滚动（默认） -
fixed：背景相对于视口固定，产生“视差”效果 -
local：背景随元素自身滚动（适用于有滚动条的块）
例如：background-attachment: fixed; 可实现常见的固定背景特效。
7. background-origin 和 background-clip：控制背景绘制区域
background-origin 定义背景图的定位参考框；background-clip 决定背景的绘制区域（即背景可见范围）。
三类盒模型区域：-
border-box：包含边框区域 -
padding-box：从内边距开始（默认 origin） -
content-box：仅内容区域
例如：
-
background-origin: content-box;背景图从内容区开始定位 -
background-clip: text;结合 -webkit-text-fill-color 可实现文字背景图（需加前缀）
8. 简写属性：background
CSS允许将多个 background 属性合并为一行简写，提高代码效率。
语法顺序（推荐）：background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [background-size] [background-origin] [background-clip];示例：
background: #fff url(bg.jpg) no-repeat fixed center/cover;-
background: red;（只设颜色也可）
注意：简写会重置所有背景相关属性，未声明的部分将使用默认值。
基本上就这些。掌握 background 系列属性，能灵活打造各种视觉背景效果，从简单配色到复杂图文叠加都不在话下。关键是理解每个属性的作用和相互影响，实际开发中多尝试组合即可熟练运用。
