网页背景设置-CSS背景全攻略(3)
点击次数:更新时间:2011-07-30 12:07:26【打印】【关闭】
|
页面已经向下滚动了，但是图像仍然保持可见。 需要重视的一点是背景图只能出现在它父元素能达到的区域。即使图片是相对于视口(view port)定位地，如果它的父元素不可见，图片就会消失。参见下面的例子。此例中，图片位于视口(view port)的左下方，但是只有元素内的图片部分是可见的。 background-image: url(test-image.jpg); background-position: 0 100%; background-repeat: no-repeat; background-attachment: fixed;
因为图片开始在元素之外，一部分图片被切除了。 背景的简写属性可以把背景的各个属性合为一行，而不用每次都单独把他们写出来。格式如下： 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 */
}
|
