CSS background系列属性

一、元素背景是指哪些区域

默认情况下元素的背景是指元素border（包含border）以内的区域。

在CSS3中可用使用background-clip改变元素背景区域。

1.1 background-clip

指定背景在被应用元素上的绘制区域。元素盒模型包含content, padding, border, margin。默认背景绘制的区域包含：content+padding+border，不包含margin区域。通过该属性可以控制绘制的区域。

background-clip: border-box|padding-box|content-box|initial|inherit|text;

其中取值text比较吊炸天，即背景只显示在文本区域，可以实现美轮美奂的文字啦。

1. 该属性颜可以影响颜色类型和图片类型的背景；
2. 背景只能在可绘制区域里绘制，其他区域如margin区域是不会绘制的。

二、背景颜色

2.1 background-color

指定背景的颜色

1. 只能设置一个颜色值，特殊的颜色值：transparent，也是默认值；
2. 通过background-clip属性可以控制background-color的应用范围；
3. background-clip属性要先背景颜色属性时，否则该background-clip属性无效（背景图片就没有这个问题）。

三、背景图片

3.1 指定背景图片

1）background-image

给元素指定一个或多个图片类型的背景（而只能指定一种背景颜色）。CSS3可以指定多个背景图片了。多个图片之间用逗号隔开，其他相关的属性可以做作用于多个背景图片上，也是用逗号隔开。

1. 多个背景图片之间的显示互相独立，各不影响；
2. 可以同时指定背景图片和背景颜色；
3. 背景图片本身是有自身尺寸的(background-size)，被应用元素也有自己的尺寸。被应用元素没有被背景图片覆盖的区域则会通过重复绘制背景图片（当然了可以通过CSS属性修改默认的方式）的方式进行覆盖整个绘制区域。

3.2 背景图片相关的属性

背景图片本身是有自身尺寸的(background-size)，被应用元素也有自己的尺寸。可以对背景图片进行更复杂的操作。

1）background-origin

原点（origin）是指背景图片开始绘制起始点，默认情况下原点在被应用元素的padding区域的左上角位置。通过background-origin属性可以修改原点位置。以原点向右有X坐标轴正方向，向下为Y坐标轴正方向，背景图片就按照这个坐标系统开始重复绘制背景图片。坐标系的反方向都是重复方式绘制。

background-origin: padding-box|border-box|content-box|initial|inherit;

1. 原点的坐标系是个矩形区域；
2. 可能我们会想当然的认为背景的绘制区域（backgroud-clip）的左上角就是背景图片绘制的原点，但实际却不是这样的,他们俩没有必然的关系：

• 首先原点和绘制区域的默认值是不一样的
• 甚至原点可能在绘制区域的外面

2） background-position

背景图片的左上角称为背景图片的位置。该位置是相对于原点构建的坐标系，默认情况下该位置就是在原点。通过background-position可以指定图片相对于原点移动的位置（也可以认为移动背景图片到指定的位置）。

background-position-x: xpos | inherit | initail;
background-position-y: ypos | inherit | initail;
// 简写形式
background-position: xpos [ypos] | inherit | initail;

1. xpos取值：

   • 绝对值：图片左上角相对于原点X轴方向移动距离;
   • 百分比：计算方式比较奇葩。
     如background-position-x: 10%并不是表示图片左上角相对于原点X轴方向移动10%，而是表示背景图片X轴方向10%的位置（基于图片Size计算）和原点坐标X轴方向10%的位置（基于原点矩形宽度计算）对齐。计算方式有点绕，主要目的是通过这种计算方式可以很容易实现背景图片的对齐：如0%即表示左对齐，50%表示居中，100%表示右对齐。
   • 关键词left: 表示图片的左侧跟原点矩形左边对齐，相当于0%，0
   • 关键词center：表示背景图片在原点矩形中左右居中，相当于50%
   • 关键词right：表示图片的右侧和原点矩形的右侧对齐，相当于100%

2. ypos取值：

   • 绝对值：相对于原点Y轴方向距离
   • 百分比：类似xpos取值百分比
   • 关键词top：表示图片的上边和原点矩形上边对齐，相当于0%, 0
   • 关键词center：表示背景图片在原点矩形上下居中，相当于50%
   • 关键词bottom：表示背景图片的底部和原点矩形的底边对齐，相当于100%
3. 总结一下就是：绝对值用来控制图片移动距离，百分比值控制图片对齐方式，关键词值是对齐方式的简写形式。

3）background-repeat

一方面背景图片可能比背景区域小， 另一方面背景图是从origin位置开始绘制的，部分背景区域可能在原点坐标系的负方向。对那些没有被背景图片覆盖的区域，浏览器默认会通过从左到右，从上到下的方向进行重复绘制背景图片，原点的负方向也是按照这个方式重叠绘制。通过background-repeat属性可以控制是否重复以及怎么执行重复绘制背景图片。

background-repeat: repeat | repeat-x | repeat-y | space | round | initital | inherit

1. repeat-x, repeat-y, repeat
   是浏览器默认的行为：从上到下，从左到右，背景图片可能会发生剪切
2. space
   space让背景图片在不发生剪切的情况下尽可能多的重复，如果有多余的空隙，则均分在各个背景图片之间。
   注意space只是保证原点矩形内背景图片不发生剪切，对于那些不在原点矩形外的背景区域还是通过剪切的方式进行重复
3. round
   round跟space类似，但是如果有多余的空隙则背景图片通过缩放的方式侵占空隙。
   拉伸：多余的空间小于背景图片一半
   压缩：多余的空间大于背景图片的一半
   注意round跟space类似，round也只是保证原点矩形内背景图片不发生剪切，对于那些不在原点矩形外的背景区域还是通过剪切的方式进行重复。

4）background-size

背景图片可能具有原始的尺寸，可以通过background-size指定背景图片的大小，进而可以对背景图片进行缩放操作。

background-size: auto | width [height] | cover | contain | initail | inherit

1. auto表示使用图片的本身的尺寸；

2. width [height] 指定具体的长度，

   • 绝对值
     指定具体的值
   • 百分比
     相对于原点矩形的尺寸计算
3. cover
   首先保证背景图片平铺整个绘制区域，如果背景图片小，则通过等比例方式拉伸
4. contain
   首先保证背景图片完整显示背景图片，如果背景图片大，则通过等比例方式缩小

5) background-blend-mode

指定多个背景图片混合模式

6) background-attachment

指定背景图片的固定方式。

background-attachment: scroll|fixed|local|initial|inherit;

1. scroll: 表示背景图片相对于元素本身固定，即它会随着被应用元素的滚动而滚动；
2. fixed: 表示背景图片相对于元素的视口固定，即它不会随着被应用元素的滚动而滚动；
3. local: 表示背景图相对于应用元素的内容而固定，即如果被应用元素的内容有滚动，则其会随着被应用元素的内容滚动而滚动（注意和fixed区别）。

7) background

简写格式

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

额，好长，记不清的话还不如使用具体的backgroud属性。方便的记忆法：

1. 先确定背景类型
2. 如果是图片，则确定图片的属性（位置，大小，重复方式，绘制起始点）
3. 确定绘制区域
4. 背景图片固定方式

四、总结

1. 绘制元素背景的条件：

   • 首先要确定背景区域；
   • 确定背景类型：颜色、图片；
   • 如果是图片还可以更细致的控制。
2. 除了background-clip可以应用于background-color其他属性都是用于background-image的；
3. 如果background-clip取值为border-box，则border会覆盖在background上面，即border的颜色或者图片会覆盖背景颜色或者图片。