最近一次需求中对于background相关的一些属性使用较多，总结下，希望提高下次的开发效率
background属性
background-colorbackground-imagebackground-positionbackground-sizebackground-repeatbackground-originbackground-clipbackground-attachment一. background-color
没啥好说的，应该不会有人没有过吧
默认值：transparent可取值：色彩值元素背景的范围：这种颜色会填充元素的内容、内边距和边框区域层级：background-image背景层级更高，会盖住background-color
元素背景范围可以通过属性 调整
二. background-image
可取值：图片路径背景的范围：从内边距开始填充背景background-image其实是从内边距开始填充，是因为background-origin的默认值是padding-box，可以改变的
三. background-position
作用：设置背景图像的起始位置
可取值
补充：
(1). top bottom：取值无效
(2). 以上表格中的%数值计算方式见第4点关于%有话说
(3). 多张图片的时候用 “,” 隔开。如： 0 0, center;
关于px值有话说
px值是相对自身位置的偏移
关于%有话说
当指定百分比值的时候，实际上执行了以下的计算公式（该公式可以用数学方式定义图片和容器相对位置重合）
(container width - image width) * (position x%) = (x offset value)
(container height - image height) * (position y%) = (y offset value)
此处；这个contain width在background-origin取 padding-box的时候（等于盒子padding + width content）
所以，如果背景图片的大小和容器一样，那设置百分比的值将永远无效，因为“容器和图片的差”为0（图片永远填满容器，并且图片的相对位置和容器的相对位置永远重合）。在这种情况下，需要为偏移使用绝对值（例如px）
50% 和center的区别
个人感觉是一样的
四. background-size
作用：设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。可取值：关于%有话说% 的宽度对应的是 container width；container width理解就是铺背景图片的区域宽度
五. background-repeat
作用：定义背景图像的重复方式。可取值：六. background-origin
作用：指定背景图片的原点位置背景相对区域.自我理解：背景图片“铺”的区域；决定content width的大小可取值：注：background-origin 都是对应区域的外边界
七. background-clip
作用：设置元素的背景**（背景图片或颜色）**是否延伸到边框、内边距盒子、内容盒子下面—MDN的说法个人理解：个人感觉该属性是仅仅对background-color生效的可取值:与background-clip的区别：原因： 其值设置成 border-box（或者content-box）；背景图片依然还是按在padding-box区域内显示（因为background-origin的值默认padding-box）
(1). 该属性的设置对background-color的也有效
(2). 该属性不会对background-position有任何影响，background-orgin会影响的
可以理解该属性就是把想隐藏的部分隐藏了
注：background-clip 都是对应区域的外边界
八. background-attachment
作用：决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。可取值：实际效果区分可以移到这里体验：/zh-CN/docs/Web/CSS/background-size
对background-position的影响
background-attachment:fixed 后，相对的是浏览器的高度;相当于背景被设置在了body上。
