Css背景图片知识总结

一、概述

    背景是css中一个重要的的部分，也是需要知道的css的基础知识之一。本篇文章主要总结了有关背景图片的5种常见属性，分别是：

1、 background-color: 指定填充背景的颜色。

2、background-image: 引用图片作为背景。

3、 background-position: 指定元素背景图片的位置。

4、background-repeat: 决定是否重复背景图片。

5、background-attachment: 决定背景图是否随页面滚动。

这些属性可以全部合并为一个缩写属性: background。需要注意的一个要点是背景占据元素的所有内容区域，包括 padding 和 border，但是不包括元素的margin。它在 Firefox, Safari ,Opera 以及 IE8 中工作正常，但是 IE6 和 IE7 中，background 没把 border 计算在内。

二、基本属性—背景色(background-color)

background-color 属性用纯色来填充背景。有许多方式指定这个颜色，以下方式都得到相同的结果。

background-color: blue;

background-color: rgb(0, 0, 255);

background-color: #0000ff;

background-color 也可被设置为透明（transparent），这会使得其下的元素可见。

三、背景图(background-image)

background-image 属性允许指定一个图片展示在背景中。可以和 background-color 连用，因此如果图片不重复地话，图片覆盖不到的地方都会被背景色填充。代码如下：

background-image: url(image.jpg);

四、背景平铺(background-repeat)

   设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。这也许是你需要的，但是有时会希望图片只出现一次，或者只在一个方向平铺。以下为可能的设置值和结果：

background-repeat: repeat; （即默认方式，完全平铺背景； ）

background-repeat: no-repeat; （不平铺）

background-repeat: repeat-x; （水平方向平铺）

background-repeat: repeat-y; （垂直方向平铺）

五、背景定位(background-position)

background-position 属性用来控制背景图片在元素中的位置。实际上指定的是图片左上角相对于元素左上角的位置。

1、background-position可以用数字或百分比来表示：
第一个数字表示 x 轴(水平)位置，第二个是 y 轴(垂直) 位置。

background-position: 75px 0;

background-position: 100% 50%;

2、background-position也可以用关键词来表示：

x 轴上：* left

·   * center

·   * right

y 轴上：* top

    * center

    * bottom

顺序方面和使用像素值时的顺序几乎一样，首先是 x 轴，其次是 y 轴，像这

六、背景附着

background-attachment 属性决定用户滚动页面时图片的状态。三个可用属性为 scroll(滚动)，fixed(固定) 和 inherit(继承)。inherit 单纯地指定元素继承他的父元素的 background-attachment 属性。

如果设置 background-attachment: scroll，就设置了当元素滚动时，元素背景也必需随着滚动。简而言之，背景是紧贴元素的。这是 background-attachment 默认值。

用一个例子来更清楚地描述下：

background-image: url(test-image.jpg); 

background-position: 0 0;

background-repeat: no-repeat;

background-attachment: scroll;

当向下滚动页面时，背景向上滚动直至消失。

但是当设置 background-attachment 为 fixed 时，当页面向下滚动时，背景要待在它原来的位置(相对于浏览器来说)。也就是不随元素滚动。

七、背景的简写属性

可以把背景的各个属性合为一行，而不用每次都单独把他们写出来。格式如下：

background:
<color> <image> <position> <attachment> <repeat>

例如，下面的声明

background-color: transparent;

background-image: url(image.jpg);

background-position: 50% 0 ;

background-attachment: scroll;

background-repeat: repeat-y;

可以合为单独一行：

background: transparent url(image.jpg) 50% 0 scroll repeat-y;

八、CSS3 中的背景

CSS3 中的背景有较多改进。最显著的是多背景图片的选项，同时也增加了4个新属性。

1、多背景

CSS3 中，可以对一个元素应用一个或多个图片作为背景。代码和 css2 中的一样，只需要用逗号来区别各个图片。第一个声明的图片定位在元素顶部，其它的图片按序在其下排列，例如：

background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);

2、背景修剪(background-clip)

background-clip 属性用来增强背景显示位置的控制能力。可能的值为：

* background-clip: border-box;
背景显示在边框内。
* background-clip: padding-box;
背景显示在内补白(padding)内，而不是边框内。
* background-clip: content-box;
只在内容内显示背景，而不是内补白(padding)和边框内。
* background-clip: no-clip;
默认值，和 border-box 一样。

3、背景原点(background-origin)

这个属性和 background-position 结合起来使用。可以从边框，内补白或者内容盒子开始计算 background-position (类似于 background-clip)。

* background-origin: border-box;
以边框为原点开始计算 background-position.
* background-origin: padding-box;
以内补白为原点开始计算 background-position
* background-origin: content-box;
以内容盒子为原点开始计算 background-position
4、新属性： 背景尺寸(background-size)

background-size 用来调整背景图的大小。有好几个可能值：

* background-size: contain;
缩小图片来适应元素的尺寸(保持像素的长宽比)
* background-size: cover;
扩展图片来填满元素(保持像素的长宽比)
* background-size: 100px 100px;
调整图片到指定大小
* background-size: 50% 100%;
调整图片到指定大小。百分比是相对于包含元素的尺寸的。

九、总结

  以上便是在工作中常用的有关背景图片的属性：背景颜色background-color、背景图片background-image、位置background-position、平铺方式background-repeat、是否滚动background-attachment以及css3中新增的有关背景图片大小background-size等属性，这些属性通常在一起采用简写的方式使用，有关背景图片的其它属性不在一一列举。