关于css背景的一点总结

background默认背景区域覆盖内容和内边距及边框，分别有以下属性：

1.background-clip（定义背景绘制区域）

• border-box 背景覆盖边框最外面
• padding-box 背景覆盖内边距的最外面
• content 背景仅覆盖内容区域
• text 最常用，把背景绘制在文本区域内，文本用背景填充，文本线条之外的背景为透明。
• ps：1.此属性对根元素（如html中的body或html元素）

2.background-size（用于设定背景图片大小，IE9以下不支持）

• cover 缩放背景完全覆盖背景区，由于切割，可能会导致背景图片一部分看不到
• contain 将图像缩放为放在背景定位区域中的尺寸，装入背景区，可能部分区域空白不被背景覆盖。
• length 
  • 可以放大可以缩小，可以使用像素值也可以使用em，并且不同单位可以混用
  • 如果允许允许背景重复，重复的图像与原图像等同大小。
• percentage
  • 声明的百分比相对背景定位区域计算，即由background-origin定义的区域，而非background-clip计算
  • 长度值和百分值也可以混用
  • 不能设置负的长度值和百分数值
• auto
  • 如果一个轴设置为auto,而另一轴不是，且图像含有固定宽高比，则该轴按照另一轴的宽高比计算
  • 如果出于一些原因，第一步失败，图像没有固定宽高比，则auto设置为相应轴的固定尺寸（宽对应宽高）
  • 如果前两部均失败，auto将解析为100%（相对于背景定位区域）

3.background-position(图像的具体位置，适用于块级元素和置换元素)

• 如果只设置一个关键字，则另外一个方向居中。
• 百分数值和长度值可以混用，还有方向也可混用
• 可以使用负值，把原图向拉到元素的背景区域之外。

4.background-origin（计算源图像的位置以什么时候的边界为基准，定义的是背景定位区域）

• border-box 源图像的左上角放在边框左上角。
• padding-box 源图像的左上角放在边框内侧的左上角。
• content-box  源图像的左上角放在内容区域的左上角。
• ps：以上均为默认，可通过background-position来改变

5.background-repeat(背景是否重复)

• repeat
• no-repeat
• round 会缩放图像，但是不覆盖background-position值，为了确保重复时不裁剪背景图，必须放在四个角之一位置。
• space 确定沿某一轴能完全重复多少次，然后从背景区域的一遍到对边均匀排列图像（间距不等），可能会覆盖一个轴的position值，不影响另外一个。

6.background-image(背景图像)

• url()
• linear-gradient(#ddd,#fff)设置背景为渐变色。

7.background-attachment（背景图是否固定/滚动）

• fixed背景图固定，不随文档滚动
• loacl 与fixed 相反
• scroll 背景图像随着文档滚动。

总结:background可以写为一个属性，但需要注意以下：

1. background-size值必须紧紧跟随background-position之后，二者之间要以斜线隔开
2. 值的规则依然适用，横向值在前，纵向值在后。
3. 同时为background-origin和background-clip提供值，前者必须在前。如果只提供一个值，则同时设定。
4. background为简写属性，所以默认值（未单独设置）会覆盖之前值。