CSS background系列属性

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

默认状况下元素的背景是指元素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、背景颜色

2.1 background-color

指定背景的颜色

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

3、背景图片

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. 背景图片固定方式

4、总结

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

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