背景的简写属性

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

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;

背景的一般用法

除了可以用来使元素更加优雅这类显然的用法之外，背景也可以用于其它的目的。

仿栏

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

仿栏是个非常简单的背景技巧，这个技巧最早发表在A List Apart 。思路很简单：不再给每列单独设置背景，而是给各列的父元素设置一个背景图。所有栏的设计都包含在这张图片之中。

文本替换

在网页上，对于字体的选择是相当有限的。可以使用 sIFR 之类的工具来定制字体，但是这需要用户启用 JavaScript 。一个适用于任意浏览器的简单方法是，用想用的字体来做一张文本图片，并用这张图片作为背景。这样，文本依然出现在文档标记中以供搜索引擎检索和屏幕浏览器识别，但是在浏览器中就会显示首选的字体。

例如，HTML 标记可能是这样的：

<h3>Blogroll</h3>

假如有一个 200 乘 75 的图片，上面有更好看的字体，就可以用如下方式来替换文本：

h3.blogroll {
width: 200px;
height: 75px; /* So that the element will show the whole image. */
background:url(blogroll-text.jpg) 0 0 no-repeat; /* Sets the background image */
text-indent: -9999px; /* Hides the regular text by moving it 9999 pixels to the left */
}

简单的圆点

无需列表中的圆点看起来很难看。不用再处理所有不同的 list-style 属性，只需要简单地把他们隐藏并用背景图代替就可以了。因为图片可以随意选择，这些圆点就可以看起来更漂亮。

下面，我们把一个无需列表改造成有圆滑圆点的：

ul {
list-style: none; /* Removes default bullets. */
}
 
ul li {
padding-left: 40px; /* Indents list items, leaving room for background image on the left. */
background: url(bulletpoint.jpg) 0 0 no-repeat;
}

出处：前端观察
责任编辑：bluehearts

上一页 CSS背景全攻略 [3] 下一页 CSS背景全攻略 [5]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。