属性分类
下面的示例，small.webp比展示区域小，love.webp比展示区域大
background-color
background-image
background-image: url(star.png);
只设置background-image，会以实际图片大小展示，大于展示区图片就会被裁剪。
如果除了背景图像外，还指定了背景颜色，则图像将显示在颜色的顶部。
还可以设置渐变
亦可以设置多个背景图，其他的background-*属性对应background-image的位置
background-size
cover—浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比。在这种情况下，有些图像可能会跳出盒子外contain— 浏览器将使图像的大小适合盒子内。在这种情况下，如果图像的长宽比与盒子的长宽比不同，则可能在图像的任何一边或顶部和底部出现间隙。
background-repeat
当background-size为cover，设置background-repeat并不会有变化
当background-size为contain，设置background-repeat为repeat或repeat-x并不会有变化
background-position
background-position是background-position-x和background-position-y的简写，它们允许您分别设置不同的坐标轴的值。 默认是0 0
还可以是数值px、数值百分比，可以混合使用
background-attachment
scroll: 使元素的背景在页面滚动时滚动。如果滚动了元素内容，则背景不会移动。实际上，背景被固定在页面的相同位置，所以它会随着页面的滚动而滚动。fixed: 使元素的背景固定在视图端口上，这样当页面或元素内容滚动时，它就不会滚动。它将始终保持在屏幕上相同的位置。local: 这个值是后来添加的(它只在Internet Explorer 9+中受支持，而其他的在IE4+中受支持)，因为滚动值相当混乱，在很多情况下并不能真正实现您想要的功能。局部值将背景固定在设置的元素上，因此当您滚动元素时，背景也随之滚动。 MDN示例： mdn.github.io/learning-ar…
background-blend-mode
定义该元素的背景图片，以及背景色如何混合.
background-clip
设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。
background-origin
规定了指定背景图片background-image 属性的原点位置的背景相对区域.
属性简写
这里有一些规则，需要在简写背景属性时遵循，例如:
background-color只能在逗号之后指定。background-size值只能包含在背景位置之后，用'/'字符分隔，例如：center/80%。
参考
