css常用属性总结：背景background上篇

1.在前面一节中我们提到了color的使用，类似于前景色，我们同样可以为元素的背景声明颜色，可以使用background-color属性，

它接受任何有效的颜色值。先看看它的语法。

background-color

允许值 <颜色> | transparent

初始值 transparent

可否继承 否

适用于 所有元素

2.背景指的是内容框（content）和补白（padding），总是位于前景的后面，所以，社么金明的背景色会同时应用于内容框和补白，当然，
css3中增加了可以控制背景色的渲染位置，在css3属性解密中再提。如果你的网页需要一个灰色的背景色，只需要

body{background-color:gray;}这样就得到你要的效果。通常在网页设计中会同时设置前景色和背景色的，至于如何搭配，看UI的心情。

如果背景色满足不了我们的项目需求，那就的使用下面的background-image了。

background-image

允许值 <url> | none

初始值 none

可否继承 否

适用于 所有元素

缺省值none表示：没有图像放置于背景上，想要获得背景图像，只需要给出一个URL值即可：

body{background-image:url(bg123.gif);}

由于其他背景属性都取缺省值，这使得图像bg123平铺与文档的背景，效果图如下：

 

背景图像可以用于任何元素，不论是块级元素，还是内联元素。

3.既然能在背景上使用图片来实现复杂的展示效果，但是我们能控制背景图的位置，可否平铺等啊，这就需要使用background-position了。

background-repeat

允许值 repeat | repeat-x | repeat-y | no-repeat

初始值 no-repeat

可否继承 否

适用于 所有元素

repeat使图像在两个方向平铺，就像前面的背景图像那样，repeat-x和repeat-y使图像分别在水平和垂直方向上平铺，no-repeat禁止图像在任何方向上平铺。
来看一组效果图吧，这样一目了然。

这是背景平铺的一组效果图。

 

background-position

允许值 [百分比] | <长度> | [top | center |bottom] | [left| center| right]

初始值 0% 0%

可否继承 否

适用于 块级元素和替换元素

注意：百分比是相对于元素和初始图像上的一个点的值。

关于关键字left，center，right的用法其实很直观，就是背景图相对于应用元素的水平方向和垂直方向。如

body{background-image:url(bg123.gif);background-repeat:no-repeat;background-position:top right;}

这样就得到一个非平铺的位于body的右上方。

如果只有一个关键字，缺省的关键字为center。

body{background-image:url(bg123.gif);background-repeat:no-repeat;background-position:right;}
背景图是靠右垂直居中的。

百分比值对齐
这里解析的原理与关键字值有点不同，使用百分比值是同时应用于元素的及其背景图像。举个例子吧

body{background-image:url(bg123.gif);background-repeat:no-repeat;background-position:33% 66%;}

这里的背景图会横跨body的三分之一，纵跨body的三分之二。而不是水平移动33%，垂直方向上移动66%，换句话说，
图像上相对于左上角水平为三分之一、垂直为三分之二的那个点与元素中同样的点重合。
这里需要注意的是，使用百分比值是有顺序。水平方向在前，垂直方向在后。

长度值对齐
长度值被用于背景图位置时，它们被解释为相对于元素的左上角的偏移量，背景图像上的偏移点也是左上角。所以长度值就很直观，

body{background-image:url(bg123.gif);background-repeat:no-repeat;background-position:20px 50px;}

背景图左上角相对于元素的左上角水平偏移20px，垂直方向上偏移30px。

关于背景图位置属性的使用，还是需要大家多尝试的，熟能生巧哦，需要注意的是关键字是不能和百分比、长度值混用的，百分比和长度值可以混用。

好困啊，洗洗睡了！