CSS中的background用法探讨

CSS中与background相关的属性有9个，他们的描述分别如下

属性描述CSSbackground通过该属性可以指定以下所有属性1background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。1background-color设置元素的背景颜色。1background-image设置元素的背景图像。1background-position设置背景图像的开始位置。1background-repeat设置是否及如何重复背景图像。1background-clip规定背景的绘制区域。3background-origin规定背景图片的定位区域。3background-size规定背景图片的尺寸。3点击属性名可以调到W3School查看其具体介绍。

所有的属性影响的范围是：为指定该属性的元素创建的盒子的边框内（包括边框）。也就是说，如果该元素设置了padding属性，那么背景不会出现padding的效果（实例见附录a）。即背景属性的范围是元素内容、内边距和边框区域。

当然，以上所说的影响范围，是默认影响范围，在CSS3之后，可以通过background-clip属性来改变这个范围。

下面一一介绍各个属性的使用情况。由于 background 属性是一个通用的属性，在其中可以指定下面的其他8个属性的内容，我们最后再介绍其用法。剩下的8个属性中，我们最常用的大概就是 background-color 和 background-image 属性了。

background-color属性

该属性设置元素的背景色，属性的值是任何有效的颜色值，如：

background-color: red;

background-color: #FF0000;

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

background-color: rgba(255, 0, 0, 0.5);

background-color: hsl(120, 65%, 75%);

background-color: hsla(120, 65%, 75%, 0.3);

当然，该属性也可以设置成渐变色，具体如何设置详见 附录b。

background-image属性

顾名思义，这个属性设置元素的背景图片。该属性的值是一个url，如：

background-image: url('images/1.jpg');

background-image: url('images/2.gif');

background-image: url('images/3.png');

对于该属性，大家需要知道以下三点：

1. 背景图片可以放置gif动态图，因而产生动态背景。当然，使用png的话，透明效果也能出来。

2. 如果同时设置了background-color 和 background-image属性，两个都会起效果，并且图像会盖在背景色之上。很多书上说background-image的优先级高于background-color，background-color可以在background-image加载过程中，或者加载出错时代替背景图使用，这样的理解是错误的！细心的你可以发现，背景色和背景图片是同时生效的，只是背景图片层位于背景色层之上，把它盖住了而已。当元素的背景图是png，通过透明背景可以看到设置的背景色；当元素的背景图是gif，通过重复图像之间的间隙可以看到背景色；当元素的背景图是jpg，设置图像不重复（background-repeat: no-repeat;）时，多出来的地方都能看到背景色。

3. 背景图片总是在其他项之后渲染，因此总给人一种载入慢的感觉。并且背景图不能像<img>一样有alt信息，请勿将background-image属性当做<img>标签使用。

background-repeat属性

顾名思义，该属性是设置背景图片的重复情况。在当前元素的盒子大于背景图片的情况下，背景图片会重复显示来充满盒子。该属性可以设置以下的值：

background-repeat: repeat;

background-repeat: repeat-x;

background-repeat: repeat-y;

background-repeat: no-repeat;

repeat是默认值，默认水平和竖直方向上都重复。repeat-x则是仅在水平方向重复，repeat-y是仅在竖直方向上重复。no-repeat则是不重复图片。

background-position

如果要改变背景图片的起始位置，可以通过这个属性设置。该属性可以设置如下：

background-position: 10px 20px;

background-position: 10% 20%;

background-position: left;

background-position: right;

background-position: center;

background-position: top;

background-position: bottom;

值得注意的是：

1. 该属性可以设置1个值或者2个值。仅设置1个值为某一关键词（如：left）时，第二个值默认为center，仅设置一个值为某一个数值值时（如Xpx、Xem、40%），第二个值默认为50%。默认值的效果都是居中。若设置2个值，则两个值分别代表水平和垂直距离。

2. 百分比值和其他数值值可以混用。这也就是为什么仅仅设置一个值为XXpx时，另一个值默认为50%，而不是多少px。

3. 百分比值是控制背景图整体的位置，所以当值为50%时，背景图整体居中，而不是背景图的左边在盒子的中线。
4. 提示：您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作（该提示来自W3School）。

5. 一般用该属性时，最好配合background-repeat: no-repeat使用，除非你还是需要图像重复的平铺效果。

background-attachment属性

该属性用来设置背景图片是否随着页面滚动。该属性的值可以设置如下：

background-attachment: fixed;

background-attachment: scroll;

fixed表示背景图不随页面滚动而滚动，scroll就背景图随页面滚动而滚动，是默认值。

background-clip属性

该属性用来指定背景的绘制区域，可设置的值如下：

background-clip: border-box;

background-clip: padding-box;

background-clip: content-box;

border-box 是默认值，表示绘制区域包含元素内容、内边距和边框区域。
padding-box 的绘制区域包含元素内容和内边距。

content-box 的绘制区域仅包含元素内容。

有的读者会觉得绘制区域包不包括边框区域貌似没有什么区别。其实区别很大，当边框类型不是solid，宽度较宽的时候，就可以看出区别了。

background-origin属性

该属性是用来规定背景图片设置的 background-position 属性相对于什么位置来定位的。可设置的值如下：

background-origin: padding-box;

background-origin: border-box;

background-origin: content-box;

padding-box 是默认值，该值表示图像绘制是按内边距框来定位的。

border-box 表示图像绘制是按边框盒子边距框来定位的。

content-box 表示图像绘制是按内容边距来定位的。
值得注意的是，如果背景图片的 background-attachment 属性为 fixed，则该属性设置无效。

background-size属性

该属性用来指定背景图片的尺寸。可以设置的值如下：

background-size: 100px 100px;

background-size: 50% 50%;

background-size: cover;

background-size: contain;

cover 表示将背景图片等比例放大至最大以充满整个背景区域，若和背景区域的长宽比不一致，则图片会超出背景范围，满足覆盖整个背景。

contain 表示将图片等比例放大致最大以尽量充满背景区域，若和背景区域长宽比不一致，则背景会出现留白。

注意，该属性设置的值为数值或者百分比时，若只给定宽度值，则长度为auto，即图像会等比例缩放，推荐这样做。

当然，给定值时，也可以：

background-size: auto 100px;

这样宽度会根据长度设定等比例缩放。

background属性

该属性能够一次指定多个背景属性，不同属性之间顺序不定，用空格隔开，实例如下：

background: #FF0000 url('1.jpg') no-repeat fixed center;

推荐使用这个属性来一次设置多个属性值，据说在老版本的浏览器中能够得到更好地支持。

以上就是CSS中关于背景的各个属性，由于CSS是在不断发展中的，因此本文也会随着CSS的发展不断更新。文中一些内容是参照了互联网以及W3School的内容后，经本人实践比对综合分析后得出的结论，所以要在这里感谢各位前辈的知识，只有站在巨人的肩膀上才能够进步。文中也不免会出现一些错误（暂时未发现），欢迎各位朋友多多交流指教。如果有哪些知识点讲述不清，请留言指出。

更新至2015.7.28---------------------------------

附录a

代码：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>testbg</title><style>.outer{padding: 10px;background-color: red;display: inline-block;}.inner{border: 1px solid green;width: 100px;height: 100px;}</style></head><body><span class="outer"><div class="inner"></div></span></body></html>

效果：

附录b

请参阅：http://css.doyoe.com/

或百度linear-gradient