6.1 CSS 背景（background）

尽管CSS允许给任何元素添加背景，但通常用在块级元素上。

背景属性应用在目标元素上，不过考虑到大部分HTML元素是具有透明背景的，那么在 body 上应用一个背景色，看起来将是给所有透明背景元素添加了一个默认背景。

背景色（background-color）

缺省值：transparent
可被子元素继承：不能。

我们在CSS颜色单位课程中已经学习过如何定义颜色，背景色也一样：

body{ background-color: black;}

这样背景被设置为黑色，记住文本内容需要设置合适的颜色来匹配背景色，这样才具备较高的可读性。

背景图片（background-image）

背景图片就像墙壁上的墙纸起到装饰作用，比文本具有更强的视觉冲击力。CSS允许通过图片URL来为元素添加背景图片。

body{ background-image: url(images/diagonal-pattern.png);}

图片的表现行为（如何重复渲染、如何定位、大小等）由其他背景属性定义，background-image 只用来定义使用哪张图片。

需要记住的是，HTML元素并不受背景图片大小的影响，即使背景图片大于HTML元素，元素也不会调整大小来适应背景图片。因为背景图片是一种辅助的修饰性属性，而不是内容。

HTML图片　<img> 和 CSS 背景图片的区别

本质区别就是HTML <img> 元素是内容的一部分，而CSS背景图片只是单纯的修饰符。

公司Logo、用户照片、产品图片及缩略图等，这些属于文档内容，应该使用HTML <img> 元素。

条纹图案、风景图、购物车图标等，通常依附于其他HTML元素，即便不可用也不会影响网页的可用性，这些属于修饰性元素，应该使用CSS背景图片。

当然很多情况下，应用场景边界不那么清楚，内容还是修饰这是一个模棱两可的选择。 如果的确是文档中不可或缺的部分，那么使用 <img> 元素，反之则使用CSS背景图片，在实现某些效果时会较为方便。

渐变（Gradients）

CSS还允许使用颜色渐变作为背景图片，在两种不同的形状方向上应用渐变效果：

• 线性渐变（linear-gradient） 矩形形状的单向渐变
• 径向渐变（radial-gradient） 圆形形状的全方位渐变

我们将在后续的CSS 渐变（gradients）课程中进行详细讲解。目前我们只需要知道背景渐变也可以作为背景图片（background images）即可：

body{ background-image: linear-gradient(white, grey);}

背景位置（background-position）

background-position 属性设置背景图像的起始（原点）位置。你可以使用如下3种坐标值：

• xpos ypos：像素值 px，左上角是 0 0。
• x% y%：百分比，相对于HTML元素大小的比例，第一个值定义水平位置，第二个值定义垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅定义了一个值，另一个值将是 50%。
• 位置关键词，如 center，left，bottom等，如果您仅规定了一个关键词，那么第二个值将是"center"。

您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。

body{ background-position: right bottom;}

也可以混合起来使用：

body{ background-position: center 20px;}

背景重复（background-repeat）

缺省情况下，背景会被无限重复渲染。我们可以通过CSS设置为只在水平或者垂直方向重复，以及不重复。

body{ background-repeat: repeat-x;} /* 只在水平方向重复 */
body{ background-repeat: repeat-y;} /* 只在垂直方向重复 */
body{ background-repeat: no-repeat;} /* 只渲染一次，不重复 */

背景大小（background-size）

background-size 用来定义背景图像的尺寸，语法如下：

background-size: length|percentage|cover|contain;

body{ background-size: 80px 80px;}

你可以使用下面的例子在线测试各种背景尺寸的应用效果，并留意 cover 和 contain 的差别：

背景属性速写（background）

CSS支持把多个背景属性组合写在一个统一的属性 background 中，这样代码更为简洁。可以设置的属性包括：

• background-color
• background-image
• background-position
• background-attachment
• background-repeat
• background-size
• background-origin
• background-clip

其中前面5个为CSS2.1规范所定义，而后面3个为CSS3新增语法。属性定义顺序和格式如下：

background-size: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];

注意在background-position属性和background-size之间有一个斜杠符号。

你可以使用下面的例子来测试背景属性速写（或称缩写）：