CSS3 之 background

1. background-image 引用

background-image: url( xxx.jpg ) 

• 可以引用多个元素

background-image: url( xxx.jpg ) ,url(xxx.png)

一个容器引用多张图片是在 css3 新增的一种功能，引用多张图片后，需要调整各自元素的位置，否则元素会重叠在一起。（在规范情况下很少使用！！！）一般在图片容错机制下使用，第一张图片在出错的情况下，显示另外加载的图片（多加载的图片通常放在浏览器的缓存内）

• linear-gradient ( 渐变方向，一个或者多个比例的颜色值 )
• radial-gradient (放射性渐变)；圆形渐变或者椭圆渐变

2. background-origin

• ( 默认值 ) padding-box

background-image 引用图片从盒模型的padding的左上角开始填充，用 background-position 设置的定位值也是同理， background-origin只规定了填充的开始位置，不规定填充的结束位置

• border-box（边框开始填充和定位）
• content-box（内容区开始填充和定位）

3. background-clip

规定背景的绘制区域（设置的区域之外不显示引用元素）；一般和 background-origin 配套使用的

属性值	作用
border-box	背景被裁剪到边框盒。
padding-box	背景被裁剪到内边距框。
content-box	背景被裁剪到内容框。

4. background-repeat （css3新增属性）

• space:

背景图在水平和垂直方向平铺且不裁剪.两端对齐，中间填补空白，背景图大小不变 (这里应该注意 不裁剪,两端对齐)

• round:

将背景图在水平和垂直方向平铺且不裁剪.但是背景图片可能被拉伸或缩短 (注意 不裁剪, 可以伸缩,有可能拉伸)

5. background-attachment

background-attachment 属性设置背景图像是否固定或者随着其容器滚动

属性值	作用
scroll	默认值。背景图像不会随容器的滚动而移动
fixed	相对视窗定位，当其容器滚动时，背景图像不会移动
local	背景图会随容器的滚动而滚动
inherit	规定应该从父元素继承 background-attachment 属性的设置

注意： fixed 是相对于视窗的，假设设置overflow属性 当视窗滚动超出其容器的大小的时候，背景会被隐藏

6. background-size

• cover

不改变元素比例，来完全填充满背景

• contain

不改变元素比例，让一个容器包裹元素，一般下面会出现缝隙

两者比例计算：

元素的一条边与容器的一条边对齐，元素实现比例的放大；