背景的简写属性
可以把背景的各个属性合为一行,而不用每次都单独把他们写出来。格式如下:
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标准化版块参加讨论,我还想发表评论。
|