关于css中的background

css中有一个属性为background，其一般写法为
<'background-color'> || <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
这是众所周知的，而且background是一个符合属性，是可以写多组的。

各属性相关解释：

• background-color: 指定背景颜色。
• background-image: 设置背景图像, 可以是真实的图片路径, 也可以是创建的渐变背景;
• background-position: 设置背景图像的位置（相对于原点），(原点由left/top/bottom/right中的临近的两个组合起来就可以描述，而这四个角是位于border-box中还是padding-box中还是content-box中则是由下面的origin属性来表示);
  • 取值：
  • right 20px bottom 30px： 距离右侧20px，距离底部30px
  • 上述表示方法中，数值距离不写则默认为0，而方向角不写则默认为左上角
• background-size: 设置背景图像的大小;
  • 取值：
  • 数值(单个代表宽度，高度等比缩放)，
  • cover铺满容器，
  • contain等比缩放到最大，
  • auto图像原来大小
• background-repeat: 指定背景图像的铺排方式;
  • 取值：
  • repeat(默认)，
  • repeat-x，
  • repeat-y，
  • no-repeat，
  • round，
  • space
• background-attachment: 指定背景图像是滚动还是固定;
  • fixed表示背景相对于视口固定，
  • local表示背景相对于元素的内容固定，
  • scroll表示背景相对于元素本身固定
• background-origin: 设置背景图像显示的原点[background-position相对定位的原点];
  • 默认padding-box，
  • border-box，
  • content-box
• background-clip: 设置背景图像向外剪裁的区域;
  • 默认border-box，
  • padding-box，
  • content-box

看完了这些属性解释后，如果还有不理解的地方那就动手练一练就明白了。

注意

还有一些需要注意的地方：
通常我们会认为background中除了color属性，其他属性都是描述背景图片相关的，和颜色就没关系了，其实不然，这里主要是origin和clip两个东西，可以单独给color设置。也就是说这俩个属性不仅仅是用来描述背景图片的。
background属性的正确打开方式：

background: url("xxx") position/size repeat attachment  orign clip,
			url("xxx") position/size repeat attachment  orign clip,
			...
			color orign clip;

通常我们写的这样的代码：
background: #0ea9b1 url("../images/2.jpg") no-repeat right top/80px 80px padding-box
其实相当于（注意这里有两组）
background: url("../images/2.jpg") no-repeat right top/80px 80px padding-box, #0ea9b padding-box
所以当你想让颜色覆盖padding-box部分而图片在content-box中的时候你就应该知道怎么做了吧。从中我们就可以发现：bg-color和image相关的一系列属性表面上看起来是写在同一组中，但其实将其看作两个组更好理解一些

特殊情况：

当我们单独设置background-origin属性的时候，这个设置不会影响color部分，仅仅会影响image相关的组。
也就是说这样的代码并不会将color限制在padding-box中：

background:  #0ea9b1 url("../images/2.jpg") no-repeat right top/80px 80px;
background-origin: padding-box;

所以想要设置color的origin和clip就只能使用上面所说的分组的写法。