前面的话

　　背景和字体一样，是一个复合属性，而且它是一个使用频率很高的属性。在 CSS3 中，背景属性在保持以前用法的同时，增加了新的相关属性。本文将详细介绍关于背景的知识

背景颜色

　　背景色 background 接受所有合法的颜色，还可以接受一个使背景透明的关键字。关于颜色的设置请移步至此。背景颜色不能继承。其默认值是 transparent，如果一个元素没有指定的颜色，那么背景就应当是透明的，这样其祖先元素的背景才能可见。

　　值: <color> | transparent | inherit

　　初始值: transparent

　　应用于: 所有元素

　　继承性: 无

背景图像

　　背景图像background-image会放在所指定的背景颜色之上。不过对于有 alpha 通道的图像格式，如 PNG，可能会部分或完全透明，这会导致图像与背景色结合。另外，如果出于某种原因无法加载图像，背景色会取代图像

　　值: <url> | none | inherit

　　初始值: none

　　应用于: 所有元素

　　继承性: 无

背景平铺

　　背景图像默认从一个元素的左上角 padding-box 开始平铺 (background-repeat)，但其从各个方向朝外面平铺，包括 border 区域。背景平铺的属性值中 space 和 round 是 CSS3 新增的值。space 表示背景图像的两端对齐平铺，多出来的空间用空白代替；round 也表示背景图像的两端对齐平铺，但多出来的空间通过自身拉伸来填充

　　[注意]space 和 round 这两个新增属性值 firefox、safari 和 IE9- 浏览器不支持

　　[注意] 背景平铺可以写空格间隔的两个值，分别代表横轴值和纵轴值，但这种写法 IE8- 浏览器不支持。写法为background-repeat: repeat no-repeat

　　值: repeat | repeat-x | repeat-y | no-repeat | space | round | inherit

　　初始值: repeat

　　应用于: 所有元素

　　继承性: 无

背景定位

　　背景定位 background-position

　　值: [[<percentage] | <length> | left | center | right] [<percentage>] | <length> | top | center | bottom ] ? ] || [[left | center | right] || [top | center | bottom]] | inherit

　　初始值: 0% 0%

　　应用于: 全部元素

　　继承性: 无

　　百分数: 相对于元素和原图像的相应点

【写法】

【1】关键字

　x(水平方向):

　　left: 图的左侧和元素左侧对齐

　　center: 图的中间和元素中间对齐

　　right: 图的右侧和元素右侧对齐

　y(垂直方向):

　　top: 图的顶部和元素顶部对齐

　　center: 图的中间和元素中间对齐

　　bottom: 图的底部和元素底部对齐

　　[注意] 单一关键字：当某一方向的关键字为 center 时可省略

【2】具体值

　x(水平方向)：

　　正值从左向右移动，负值从右向左移动

　y(垂直方向)：

　　正值从上向下移动，负值从下向上移动

　　[注意]页面左上角为原点 (0,0) 点

　　[注意] 背景图像移出到元素范围外的部分不显示

【3】百分比

　x%(水平方向)：

　　背景图像的 x% 对应元素的 x%

　y%(垂直方向)：

　　背景图像的 y% 对应元素的 y%

　　[注意] 若只写了一个值，另一个值将是 50%

【新用法】

　　在 CSS2.1 中，背景定位只支持以左上角为参照进行定位，在 CSS3 中新增了可以选择参照方向的定位。第一个和第三个参数为要参照的方向，第二个和第四个参数为偏移值

背景关联

　　background-attachment 背景关联

　　值: scroll | fixed | inherit

　　初始值: scroll

　　应用于: 所有元素

　　继承性: 无

　　scroll：背景图片会随着页面其余部分的滚动而移动。但如果它自己是可以滚动的元素，背景图不会随元素内容的滚动而滚动 (默认值)

　　fixed：原图像不会随文档滚动，且原图像的放置由可视区的大小确定，而不是由包含该图像的元素的大小 或在可视区中的位置决定。在浏览器中，随着用户调整浏览器窗口的大小，可视区可能会改变。这会导致背景的原图像随着窗口大小的改变移动位置。所以某种意义上说，图像并不是固定的，它只是在可视区大小不改变的情况下保持固定

　　[注意]IE6- 浏览器无法处理非 body 元素上的固定关系

　　local：背景图片会随着页面其余部分的滚动而移动。但如果它自己是可以滚动的元素，背景图会随元素内容的滚动而滚动

　　[注意]local 属性值 IE8- 浏览器不支持

背景原点

　　背景原点(background-origin)属性主要用来决定背景定位属性的参考原点，即决定背景图片定位的起点。在默认情况下，背景图片的背景定位属性总是以元素左上角为坐标原点对背景图片进行背景定位。而背景原点属性可以根据自己的需求来改变背景图片的背景定位起始位置

　　[注意]IE8- 浏览器不支持

　　background-origin: padding-box || border-box || content-box

　　padding-box: 默认值，决定背景定位起始位置从 padding 的外边缘开始显示背景图片

　　border-box: 决定背景定位起始位置从 border 的外边缘开始显示背景图片

　　content-box: 决定背景定位起始位置从 content 的外边缘开始显示背景图片

　　[注意] 如果将 background-attachment 设置为 fixed，background-origin 将不起任何作用

背景裁切

　　背景裁切 (background-clip) 属性用来定义背景图像的裁剪区域。同背景原点的属性有几分相似

　　[注意]IE8- 浏览器不支持

　　background-clip: padding-box || border-box || content-box

　　在 webkit 内核下支持 text 属性

　　-webkit-background-clip: text;

　　配合 -webkit-text-fill-color: transparent; 的属性可以使文字颜色呈现背景图像的效果

背景尺寸

　　使用背景尺寸 (background-size) 属性可以指定背景图片的尺寸，可以控制背景图片在水平和垂直两个方向的缩放，也可以控制图片拉伸覆盖背景区域的方式，甚至还可以截取背景图片。背景图片能够自适应元素盒子的大小，实现与模块大小完全适应的背景图片，避免了因区块尺寸不同而需要设计不同的背景图片

　　[注意]IE8- 浏览器不支持

　　背景尺寸的特性有如下用途: 在流体布局或者响应式布局中，确保背景图像能够始终适配容器大小；对于平铺的重复性背景图像，可以确保背景图像不会有截断效果；在流体布局中缩放背景图像来伪造出多列分栏效果；解决 Retina 屏幕双倍像素下背景图像模糊问题；使用链接或者列表元素的背景图像能和文本一起进行缩放

　　当背景尺寸属性为固定数值或百分比值时可以设置两个值，也可以设置一个值。只取一个值时，指定了背景图片的宽度，第二个值相当于 auto，也就是指定了高度。在这种情况下，auto 值设定之后能够让背景图片的高度自动地按照比例缩放

　　background-size: auto || <length> || <percentage> || cover || contain

　　auto: 默认值，将保持背景图片的原始高度和宽度

　　<length>: 取具体的整数值

　　<percentage>: 取百分比，相对于元素的宽度和 padding 的总和来计算

　　cover: 将背景图片放大，以适合铺满整个容器。但这种方法会致使背景图片失真。常与 background-position: center 配合来制作满屏背景效果。缺点是需要制作一张足够大的背景图片，否则在较大分辨率浏览器下会使背景图片失真

　　contain: 保持背景图像本身的宽度比例，将背景图像缩放到宽度或高度正好适应所定义背景容器的区域

多背景

　　在使用 CSS3 之前，每个容器只能指定一张背景图像，因此每当需要增加一张背景图像时，必须至少添加一个容器来容纳它。使用伪元素显示附加图片其实就是嵌套 HTML 标签实现多背景图像的变身，通过:after 和:before 等伪元素生成附加元素来放置背景图像，表面上比直接嵌套 HTML 标签更干净一些，但其实是换汤不换药

　　[注意]IE8- 浏览器不支持

　　通过 CSS3 的多背景属性，HTML 标记就不需要任何修改，在 CSS 的 background-image 或者 background 属性中列出需要使用的所有背景图像，用逗号分隔开。而且每张图片都具有 background 中的属性

　　CSS3 多背景有层次之分，按照浏览器中显示时图像叠放的顺序从上到下指定，最先声明的背景图像将会居于最上层，最后指定的背景图像将置于最底层

　　除了背景颜色之外，其他的属性都可以设置多个属性值，前提是元素有多个背景图像存在

　　对于不兼容多背景的浏览器来说，多背景属性写在单一背景属性的后面，而且还要确保这张单一背景图像确实可用。这是处理兼容 CSS3 多背景特性兼容的常用方案

　　background: [background-image] | [background-color] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-origin] | [background-clip],*

　　[注意] 若 background 在 background-origin 和 background-clip 中仅存在一个值，则该值为 background-clip；若存在两个值，则前面为 background-origin，后面为 background-clip

　　[注意] 所有背景属性都不能继承