此总结来自尚硅谷前端视频
background-image:url("图片所在路径") 设置背景图片
范例：background-image:url("./source/img/1.jpg");
渐变 ：渐变是图片，需要通过background-image设置
background-image:linear-gradient() 线性渐变
线性渐变的开头，可以指定一个渐变方向
to left/ to right/ to bottom /to top 默认 to bottom
范例：background-image:linear-gradient(to left,red,yellow);
xxxdeg xxx角度 范例 ：background-image:linear-gradient(45deg,red,yellow);
xturn x圈 范例： background-image:linear-gradient(.5turn,red,yellow);
线性渐变可以同时指定多个颜色
范例：background-image:linear-gradient(red,yellow,blue,pink)
background-image:repeating-linear-gradient()重复渐变（纯色被渐变代替）
范例：background-image:repeating-linear-gradient( red 30px, yellow 100 px);
background-image:radial-gradient(red,yellow) 径向渐变(辐射性渐变)
默认情况下，渐变圆心的形状根据元素形状来计算。
可以手动指定圆心大小(径向渐变范围)
范例：background-image:radial-gradient(100px 100px,red ,yellow)
background-color:red; 设置背景颜色为红色。
background-repeat:用来设置背景重复方式
可选值： repeat 默认值 背景会沿x轴、y轴双向重复
repeat-x:沿x轴方向重复
repeat-y:沿y轴放行重复
no-repeat:背景图片不重复
范例：background-repeat: no-repeat;
background-position:设置背景图片的位置
设置方式通过 top、left、right、bottom、center
范例:background-position: top left;
通过x轴、y轴来设置背景图片位置
范例：background-position:10px 10px;
background-clip:设置背景范围
可选值： border-box 默认值 背景会出现在边框下边
padding-box 背景不会出现在边框，只会出现在内容区和内边距
content-box 背景只会出现在内容区
范例：background-clip:centent-box;
background-orgin:背景图片的偏移量计算的原点
可选值：padding-box 默认值 background-position从内边距处开始计算
content-box background-position从内容区处开始计算
范例：background-origin:content-box
background-size：设置背景图片的大小
第一个值表示宽度 ，第二个值表示高度。 如果只写一个，则第二个默认是auto
范例：background-size:100px auto;
cover 图片比例不变，将元素铺满
contain 图片比例不变，将图片在元素中完整显示。
background-attachment: 背景图片是否跟随元素移动
可选值：scroll 默认值 背景图片会随元素移动
fixed 背景图片固定在页面中，不会随元素移动
范例：background-attachment:fixed