CSS的background属性是一个简写属性，它允许你同时设置元素的多个背景相关的子属性。使用这个属性可以简化代码，使其更加清晰和易于维护。background属性可以设置不同的子属性。
background子属性
-
定义背景颜色
使用background-color属性
格式：background-color：#ff0000; /* 蓝色 */
也可以直接用background属性
格式：background：#ff0000; /* 蓝色 */
两种方式写出来的效果是一样的。
属性值可以是颜色名、十六进制值、RGB、RGBA、HSL、HSLA或其他CSS颜色值。
-
定义背景图像
使用background-image属性
格式：background-image：url('background-image.jpg');
属性值可以是URL路径、线性渐变、径向渐变等。
-
定义背景图像的重复方式
使用background-repeat属性
格式：background-repeat：no-repeat;
属性值：
repeat：背景图像在垂直和水平方向上重复。
repeat-x：背景图像只在水平方向上重复。
repeat-y：背景图像只在垂直方向上重复。
no-repeat：背景图像不重复。
-
定义背景图像的位置
使用background-position属性
格式：background-position：center;
属性值可以是关键词（如top、bottom、left、right、center）或长度值，或两者的组合，常用的就是center。
-
定义背景图像的尺寸（CSS3）
使用background-size属性
格式：background-size：cover;
属性值：
长度值 或者 百分比
cover：覆盖整个元素区域
contain：完全包含在元素内
-
定义背景图像是否固定或者随着页面滚动（CSS3）
使用background-attachment属性
格式：background-attachment：fixed;
属性值：
scroll：背景图像随着页面滚动。
fixed：背景图像固定，页面滚动时不动。
local：背景图像随着元素的内容滚动。
-
定义背景的绘制区域（CSS3）
使用background-clip属性
background-clip控制的是背景的可见区域，即背景绘制到哪里停止。
格式：background-clip：border-box;
属性值：
border-box：背景延伸到边框内侧边缘。
padding-box：背景延伸到内边距内侧边缘，不包括边框。
content-box：背景仅延伸到内容区域，不包括内边距和边框。
text：背景将剪切并贴合文本，这是比较新的属性值，可能不是所有浏览器都支持。
-
定义背景定位的起始位置（CSS3）
使用background-origin属性
background-origin控制的是背景的定位起点，即从哪里开始定位背景。
格式：background-origin：content-box;
属性值：
border-box：背景定位相对于边框盒。
padding-box：背景定位相对于内边距盒，这是默认值。
content-box：背景定位相对于内容盒。
background属性
background 是一个复合属性，它允许你一次性设置多个与背景相关的样式。
使用background简写属性可以一次性设置多个背景属性，但如果需要设置的属性不全，也可以只设置其中的一部分。如果某个子属性未被设置，它将使用其默认值。
复合属性的优点：
-
简化代码：使用一个属性设置多个背景样式，代码更简洁。
-
易于维护：更新背景样式时，只需要修改一个地方。
-
兼容性：如果某个浏览器不支持某个子属性，整个复合属性仍然可以正常工作。
注意事项：
如果要设置的所有子属性都需要定义，可以使用复合属性。
如果只需要设置部分子属性，建议单独设置，以避免不必要的复杂性。
使用
background复合属性可以提高CSS的编写效率，但需要确保按照正确的顺序设置各个子属性。
示例
代码：
<!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>
body{ display: flex; flex-wrap: wrap; }
div{
width: 100px;
height: 100px;
text-align: center; /* 文本居中 */
border: 1px solid #000; /* 边框线 为了标记每个div盒子 */
}
.p1{
background-color: #0000ff; /* 背景色 */
}
.p2{
background: #ff0000; /* 背景色 */
}
.p3{
background-image: url('https://img2.baidu.com/it/u=2086713274,1063413959&fm=253'); /* 背景图 */
background-position: center; /* 背景定位 中心 */
background-repeat: no-repeat; /* 背景图是否重复平铺 不重复 */
background-size: cover; /* 背景图尺寸 铺满 */
}
.p4{
background: url('https://img2.baidu.com/it/u=2086713274,1063413959&fm=253') no-repeat center;
background-size: cover; /* background不支持cover属性 单独书写 */
}
</style>
</head>
<body>
<div class="p1">文本1</div>
<div class="p2">文本2</div>
<div class="p3">文本3</div>
<div class="p4">文本4</div>
</body>
</html>效果图：
