CSS background属性之背景设置详解

CSS background属性之主要背景属性

在CSS中，关于background属性，主要有5个相关的背景属性。如下所示：

• background-color属性：设置背景颜色。
• background-image属性：设置背景图片。
• background-repeat属性：是否重复背景图片。
• background-attachment属性：设置背景图片是否随页面滚动。
• background-position属性：指定背景图片的位置。

这5个背景属性可以使用background属性代替。

背景占据了元素的全部内容区域，这个区域包含了元素的padding和border，但不包含margin。

background属性在Firefox、Safari、Opera和IE8中能够正常显示，但是在IE6和IE7中不包含border。background属性在浏览器中的显示情况，如下图所示：

在上图中，我们看到，IE6和IE7的内容区域没有包含橙色的边框线（border）。

---

背景颜色——background-color属性

background-color属性使用纯色填充背景。设置背景颜色的方法有许多种，下面这3种方法显示的颜色是一样的：

background-color: #FF0000;background-color: red;background-color: rgb(255,0,0);

该属性还可以被设置为透明（transparent），从而使它下面的元素可以显示出来。

---

背景图片——background-image属性

background-image属性允许在背景中添加一张图片。该属性可以和background-color属性同时使用，因此，图片没有覆盖的地方都会显示出背景颜色。设置背景图片的方法如下：

background-image:url(image.jpg);

图片的路径是相对于样式表来说的。因此，在上面的代码中，表示图片和样式表位于同一个目录中。

再来观察一下下面的代码：

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

表示图片在样式表所在的目录的一个名为images的子目录中。也就是说，images文件夹位于样式表所在的文件夹中。

另外，使用../表示上一级目录，比如

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

表示图片位于样式表的上级目录中的images子目录中。

---

背景平铺——background-repeat属性

设置背景图片时，图片在默认情况下会在水平和垂直方向上铺满整个元素。不过，我们也可以使图片只出现一次，或者只在一个方向上平铺。如下所示：

background-repeat: repeat;    /* 默认值，同时在水平和垂直方向上平铺 */background-repeat: no-repeat; /* 图片只显示一次 */background-repeat: repeat-x;  /* 图片沿水平方向（x轴）平铺 */background-repeat: repeat-y;  /* 图片沿垂直方向（y轴）平铺 */background-repeat: inherit;   /* 图片继承父元素的background-repeat属性 */

---

背景定位——background-position属性

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

在下面的例子中，使用background-position属性来控制背景图片的位置，同时设置background-repeat为no-repeat；单位是像素；第一个数字表示水平（x轴）位置，第二个数字表示是垂直（y轴）位置：

/* 例1：默认值 */background-position: 0 0; /* 图片左上角对齐元素的左上角 *//* 例2：把图片向右边移动75像素 */background-position:75px 0;/* 例3：把图片向左移动75像素 */background-position:-75px 0;/* 例4：把图片向下移动100像素 */background-position: 0 100px;

如下图所示：

background-position属性还可以使用其它的长度单位、关键字或百分比来进行定位。

关键字在x轴上表示为left、center、right；在y轴上表示为top、center、bottom。

关键字的使用方法和像素值的使用方法一样，首先是x轴，然后是y轴。如下所示：

background-position: top right;

使用百分比也是类似的方法。

注意，使用百分比时，浏览器是以元素的百分比来设置图片的位置的。如下所示：

background-position: 100% 50%;

使用百分比定位时，是将背景图片的百分比指定的位置和元素的百分比位置对齐。就是说，使用百分比定位改变了背景图片和元素的对齐基点，不再像使用像素和关键字定位时，使用背景图片和元素的左上角为对齐基点。

上面的例子代码，就是将背景图片的100%(right) 50%(center)这个点，和元素的100%(right) 50%(center)这个点进行对齐的。如下图所示：

---

背景图片是否滚动——background-attachment属性

background-attachment属性设置页面滚动时图片所处的状态。该属性的3个属性值为scroll（滚动）、fixed（固定）和inherit（继承）。inherit表示该元素继承它的父元素的background-attachment属性值。代码如下：

background-image:url(image.jpg);background-position:0 0;background-repeat:no-repeat;background-attachment:scroll; /* 默认值，背景图片会随着页面的滚动而滚动 */

如下图所示：

当页面向下滚动时，背景图片会向上移动，直到消失。

当background-attachment属性设置为fixed时，将页面向下滚动，而背景图片会待在它原来的位置上，不会随着元素进行滚动。代码如下：

background-image:url(image.jpg);background-position:0 100%;background-repeat:no-repeat;background-attachment:fixed; /* 背景图片不会随着页面的滚动而滚动 */

如下图所示：

页面在向下滚动的同时，图像仍然保持可见！

背景图片只能出现在它的父元素所能达到的区域。即使图片是相对于浏览器窗口进行定位的，但是，如果它的父元素不可见，图片就会消失。如下所示：

background-image:url(image.jpg);background-position:0 100%;background-repeat:no-repeat;background-attachment:fixed; /* 背景图片只能出现在它的父元素所能达到的区域 */

上面的代码中，虽然背景图片位于浏览器窗口的左下方，但是只有元素内的图片部分是可见的。

如下图所示：

因为背景图片是从元素外面开始的，所以元素外面的图片部分被切除了。

---

背景的简写属性——background属性

我们可以把背景的各个属性合并在一起使用，而不需要每次都把他们单独写出来。格式如下：

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;

在上面的代码中，并不需要给出每一个值，如果某一个值没有指定，就会使用属性的默认值。比如，上面的代码和下面的代码效果是一样的：

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

---

背景的一般性用法

除了给元素使用背景以外，背景还有以下的用法：

1. 仿栏

当使用float属性定位布局元素时，要确保两栏或多栏具有相同的长度是比较困难的。如果长度不同，则其中一栏的背景就会比另外栏的背景短，这样就破坏了整个布局的设计。

此时，不需要给每一列单独设置背景，而是给各列的父元素设置一个背景，这样，所有栏的设计就都包含在这张图片中了。

2. 文本替换

在网页上，有时候对于字体的选择是相当有限的。不过，有一个适用于所有浏览器的最简单的方法：

将要用的文本内容和要使用的字体做成一张文本图片，再把这张图片作为背景，然后再在网页中输入文本内容。这样，文本依然会出现在文档标签中，以供搜索引擎检索，但是，在浏览器中就会显示出首选的字体。方法如下：

<p class="one">这是一段文本内容！</p>

再做一张同样大小的图片，图片上面显示了自己想要的字体，此时，就可以用下面的方法来替换文本了：

h3.one{width:200px;height:75px;background:url(text.jpg) 0 0 no-repeat;text-indent: -9999px; /* text-indent属性：向左边移动文本内容的位置，以便隐藏起来。*/}

3. 简单的圆点

无序列表中的圆点标记确实难看！我们可以将它隐藏起来，然后再使用背景图片来代替。代码如下：

ul{list-style:none; /* 隐藏列表中的圆点标记 */}ul li{padding-left:30px; /* padding-left属性：设置背景图片左边的距离 */background:url(image.jpg) 0 0 no-repeat; /* 设置背景图片 */}

因为我们能够灵活制作背景图片，所以根据上面的方法就可以制作出漂亮的无序列表标记来！