一、综合写法：background:颜色 图片 是否重复 定位 关联；
<1>颜色：英文单词 #bcbcbc rgba(0,0,0,0.5) hsl(色调，饱和度，亮度） hsla(色调，饱和度，亮度,模糊度）
<2>图片 url("图片地址")
<3>重复/不重复 repeat /no-repeat repeat-x;水平方向重铺 repeat-y;垂直方向重铺
<4>定位 position:可以用%，px表示，也可以用：left center right top bottom组合使用表示。
<5>关联 scroll/fixed;滚动/固定
二、分解
背景颜色：background-color:red;
背景图片：background-image:url("图片地址“）
背景是否平铺：background-repeat:no-repeat/repeat;背景图不平铺/平铺
background-repeat:repeat-x;水平方向重铺
background-repeat:repeat-y;垂直方向重铺
背景定位：background-position：背景定位；
关键字：水平值 left right center
垂直值 top bottom center
% px
背景关联：background-attachment:scroll/fixed;背景关联滚动/固定
三、背景颜色渐变
1、线性渐变： background:linear-gradient( 方向，颜色1，颜色2.......);
注：方向带to,不用加浏览器兼容前缀。不带to，需要加浏览器兼容前缀
2、径向渐变： background:-webkit-radial-gradient(渐变位置，形状，大小，颜色1，颜色2，颜色3);默认从中心到四周
注：一定要加浏览器兼容前缀
四、背景图的相关属性
<1>背景图初始位置：background-orgin:padding-box /border-box /content-box;背景图的初始位置从内边距/边框/内容区域开始
<2>背景图裁剪：background-clip:padding-box /border-box /content-box;背景图从内边距/边框/内容区域开始裁剪
<3>背景图大小：background-size:100px 200px /300px /cover/contain ;水平大小 垂直大小 /宽度（高度等比例缩放） /等比例缩放铺满元素/等比例缩放使得某一个方向铺满元素