background :
background-color,background-image,background-repeat,background-attachment,background-position,background-clip,background-origin;
background-attachment : scroll / fixed;
scroll是默认值，背景图片随着滚动条的滚动而滚动；
fixed是背景图片固定，不会随着滚动条的滚动而变化（可以模拟QQ页面效果的实现：https://im.qq.com/）
background-position:百分比/left/top/bottom/right/数值
默认是(0,0) 相对于左上角的位置
background-size:auto/百分比或固定数值/cover/contain
auto:保持原有背景图片的宽度和高度
百分比：只能应用在块级元素上，所设背景图片的大小依据块元素的对应百分比计算，如果只设定一个值，第二个值为auto(与第一个值相同)
cover:铺满的最小效果（有一边铺满即止），但是会引起图片的失真
contain:铺满的最大方案（两边都铺满才可以），同样会引起图片的失真
background-clip:border-box/padding-box/content-box
对应的是背景将分别裁剪超过border/padding/content部分的内容
背景图片示意图
其中，如果是背景色，将从border边缘的左上角和右下角部分开始渲染
而，如果是背景图片，将从padding的左上角和border的右下角部分开始渲染
因此，设置该属性后，超出的不同位置会被裁减掉。
PS:图片填充文本的效果实现
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
背景图片填充文本
background-origin:padding-box/border-box/content-box
具体方式基本同background-clip，主要是设置背景图片的起始位置
多背景：
可以用逗号分隔设置多个背景，注意多个背景的重叠关系是越后面定义的背景图层级越低
多背景
这里主要使用了五张背景图，上下左右四个角是四张，整体是一张重复的背景，可以用于设定响应式的背景，将宽高由内容撑开。
.multipleBg{
background :
url("../images/bg-tl.png") no-repeat left top,
url("../images/bg-tr.png") no-repeat right top,
url("../images/bg-bl.png") no-repeat left bottom,
url("../images/bg-br.png") no-repeat right bottom,
url("../images/bg-repeat.png") repeat left top;
/*改变背景图片的position起始点，四朵花都是border边缘处起，而平铺背景是在paddin内边缘起*/
-webkit-background-origin: border-box, border-box,border-box,border-box,padding-box;
-moz-background-origin: border-box, border-box,border-box,border-box,padding-box;
-o-background-origin: border-box, border-box,border-box,border-box,padding-box;
background-origin: border-box, border-box,border-box,border-box,padding-box;
/*控制背景图片的显示区域，所有背景图片超边border外边缘都将被剪切掉*/
-moz-background-clip: border-box;
-webkit-background-clip: border-box;
-o-background-clip: border-box;
background-clip: border-box;
}
整理通过：https://www.w3cplus.com/resources/css3-tutorial-and-case
