css中background个人理解

这是一个层叠关系，最底层是background-color, 然后上面依次是图片，在style中出现后面的置于其上。
于是就有了同时设置color和image的做法，保证在image还没加载出来的时候，有color先垫着。

border一定是在background-color和background-image上的，不会被它们遮住

background-origin和background-clip的区别

首先，他们都可以取以下几个值 border-box, padding-box, content-box origin默认是padding-box 而clip: border-box （可以理解为不切片）

background-origin设置的是图片绘制的位置，只能影响图片，对背景色不起作用

而clip可以同时作用于背景图片和背景色，（更像是对整个背景切片）

这两张图的不同仅在于右侧css中对origin和clip设置的不同

background-size

default: auto auto

本身大小，如果容器更大它也不变大。容器小，它就只显示一部分。


cover和contain都不会破坏图片本身的宽高比。
其实contain和cover就是size: 100%; 或者auto 100%; 的其中一种。具体看宽高情况
在这图的话：
contain = 100%
cover = auto 100%

设置多张图片，基本用不上，不讲也罢。

background-position

这个位置是相对于由 background-origin 定义的位置图层的。 也就是说图片的边界最多能靠到容器的什么位置。即origin中定义的那几种，padding-box，border-box，content-box。

我觉得计算最终效果可以这么想：
origin, size, repeat -> position -> clip
如果图片比容器小，从0，图片的左边贴着容器左边的border，到100%，贴着右边的border。y轴也是一样。


图片cover以后比容器大
也是一样的，
显示偏左侧，就是从0往上

如果想显示图片的右侧，那就是从100%往低了调

background-position还有一个作用就是用来搞雪碧图
这种一般都是通过position设置负值来达到效果。
关于position的学习参考了这篇文章
background-position 属性的作用：设置背景图像的起始位置。这里的起始位置是相对于自身容器而言

我试了一下，即使是容器比图片小，通过这个百分比的计算公式，算出负值也是正确的结果。知道有这么回事就好。
个人觉得他这种比官方说的相对位置更好理解

这也很好解释了图片和容器大小一样，设置百分比无效，因为相减得0

background-repeat

default: repeat

background-attachment

fixed可以用来做水印。
default: scroll

关于复合属性写法：