背景的简写属性
可以把背景的各个属性合为一行,而不用每次都单独把他们写出来。格式如下:
background: <color> <image> <position> <attachment> <repeat> |
例如,下面的声明
background-color: transparent; |
可以合为单独一行:
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 { |
简单的圆点
无需列表中的圆点看起来很难看。不用再处理所有不同的list-style 属性,只需要简单地把他们隐藏并用背景图代替就可以了。因为图片可以随意选择,这些圆点就可以看起来更漂亮。
下面,我们把一个无需列表改造成有圆滑圆点的:
ul { |