正在阅读：新手必看!CSS背景background使用攻略新手必看!CSS背景background使用攻略

2009-09-17 14:57 出处：PConline 作者：前端观察糖伴西红柿责任编辑：lizhiyan

　　背景的简写属性

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

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;
}