我正在参与掘金创作者训练营第4期，点击了解活动详情，一起学习吧！
引言
在日常的开发中 background 是我们经常会使用到的一个聚合属性，常见的使用方式有：
- 纯色：
background: #ff6700 - 图片背景
background: url(xx.jpg) center center no-repeat
以至于其他不常用的属性，我们都忘记了他们的具体使用规则；下面详细讲一下background包含的几个子属性：background-image/background-repeat/background-position
background 其中的子属性
background-image
background-image支持单一背景和多背景图，多背景以逗号分割，且多个背景会相互叠加，这就让我们有很多操作的空间，我们可以借住它的这个特点来实现一些花里花哨的背景效果。
下面看几个例子
- 锯齿效果：在线DEMO
background-image: linear-gradient(315deg, green 10px, transparent 5px), linear-gradient(135deg, pink 10px, transparent 5px);
background-size: 10px 20px, 10px 20px;
- 砖头效果：在线DEMO
background-image: linear-gradient(335deg, #b00 23px, transparent 23px),
linear-gradient(155deg, #d00 23px, transparent 23px);
background-size: 58px 58px;
background-position: 0px -33px, 4px 0px;
- 加号减号：在线DEMO
background-image: linear-gradient(gray, gray), linear-gradient(gray, gray);
background-repeat: no-repeat;
background-position: center;
background-size: 10px 40px, 40px 10px
理论上通过背景叠加的方式，可以实现任何你想要实现的效果（所有的图都是由一个个像素点构成，可以通过N个像素点去描述你的效果），但出于对性能的考虑不建议这么操作； 更多好看的效果看这里
background-repeat
background-repeat 常用的是 no-repeat，它还支持repeat-x/repeat-y/space/round，这里重点说下space和round模式是如何影响背景图分布的
1.space：在线DEMO
让背景图尽可能地重复，而裁剪，每个重复单元的尺寸不会变化；第一张和最后一张图片固定在元素的两边，然后通过拉伸空白区域让剩余的图像均匀分布。
2.round：在线DEMO
背景图会被拉伸，并保证不留空隙。随着定位区域空间的增加，如果（假设图像都是原始尺寸下）剩余空间大于图像的一般，则添加另外一张图像，在添加下一张图像是，当前的所有图像都会被压缩以留出空间放下新添加的图像
background-position
指定背景图在元素中的位置，参数值支持关键字/数值和百分比，且支持1/2/3/4个值的写法；background-position 默认值是 0% 0% 也就是 left top
- 1个值 如果只有一个值，无论是何种类型，另外一个值都默认为center；
两者是等价的
background-position: 20px;
background-position: 20px center
- 2个值 2.1 两个只都是关键字,left和right表示水平方向，top和bottom表示垂直方向，但不能两个对立方向同时出现
无效表达式
background-position: left right;
background-position: top bottom;
等价
background-position: top left;
background-position: left top
2.2 一个数值一个百分比，第一个值表示水平方向，第二个值代表垂直方向；
有效
background-position: left 10px;
无效 因为left不能代表垂直方向
background-position: 10px left;
2.3 两个只都是数值或者百分比，与2.2表现一致：第一个值表示水平方向，第二个值代表垂直方向
- 3个值和4个值 数值和百分比表示偏移量，第一个值一定要是关键字，表示偏移的方向，如果是三个值，则认为缺少的偏移量是0。
有效
background-position: left 10px top 10px;
background-position: left 10px top;
background-position: left top 10px;
无效
background-position: 10px left top 10px;
background-position: left 10px right 10px;
重点要注意的是，其百分比的计算并不是基于元素宽高，具体计算规则如下：
水平方向位移 = (容器宽度-图片宽度) * 水平方向百分比
垂直方向位移 = (容器高度-图片高度) * 垂直方向百分比
其他子属性
至于其他的子属性，在mdn文档中均可查看详细的介绍且易于理解，这里就不赘述了。
