通过CSS应用背景图像

因为喜欢新的Office2007的界面,所以很想使用一下,想来想去,觉得写篇Blog过过瘾比较合适,嘿嘿。比较遗憾的是无论是Word2007还是Windows live writer都不支持Blogger的标签,害得我每次发布了还要到Blogger去添加标签。背景图像是CSS中最重要的应用之一。

可以这样说,如果没有背景图像,就不会产生网页设计师这种职业。我们可能遇到过好多非常漂亮的Blog,它们漂亮的原因皆因运用了大量的背景图片。用CSS应用背景图像是非常简单的。

CSS2中暂时不支持对同一标签应用多个背景图像,但在下一代CSS3中将支持多个背景图像。鉴于此,有时候我们不得不添加一些无语义的标签(大多时候添加空DIV),来为同一模块添加多个背景图像。
语法:background : background-color background-image background-repeat background-attachment background-position
现在并不需要记住语法,我们可以在例子中理解。例如我们要给网页的主体应用一个背景图片,我们可能会写下这样的代码:

Body {background:#FFFFFF url(图片地址) repeat-y fixed left top;}

这条语句的意思是页面的背景颜色为#FFFFFF,背景为"图片地址",在Y方向上平铺,背景图像固定,对准左上角。可能我们不会应用到背景所有的属性,不需要的可以省略,但要遵从一定的顺序。

以前写过修改页首图片的教程,现在我们看一下Blogger头部的CSS,以及如何修改页首图片。不同的模板CSS可能不一样,请酌情修改,下面是我的模板的CSS:

#header {
width: 96%;
height: 200px;
background-color:
$bodyBgColor;
background: url(http://vvvfly.googlepages.com/f.jpg)
center;
margin: 0 auto;
color: $headerTextColor;
padding: 0;
border-left: 3px solid $borderColor;
border-right: 3px solid
$borderColor;
border-top: 3px solid $borderColor;
}

根据以前我们学过的知识,我们可以知道,这是一个ID为Header的类,应用背景图像的一句为background:
url(http://vvvfly.googlepages.com/f.jpg) center; 这一句很简单,就是引用了http://vvvfly.googlepages.com/f.jpg这张图片,center让它居中显示,没有设定Repeat,浏览器默认水平和垂直的重复显示这个图像,如果你的显示器超过19寸,就可以看到平铺的图片。

对链接应用背景图像

背景图像在网页设计中的应用是非常广泛的,下面再举一个我们司空见惯的例子。我随意找了一个Blog(http://iyubao.blogspot.com/),截取了下面这张图片,这是一组链接,我们可以看到每个链接的左边有一张小小的图片(http://online.sccnn.com/icon/450/arrow_065.gif)。




它是怎么实现的呢?我们通过CSS把内容向右偏移一下为图片留出空间,然后应用背景图像,并让图像对准左边就可以了。在上面的图片中,它可能是这样写的:

.footer-box li {padding-left:20px;
background: url(http://online.sccnn.com/icon/450/arrow_065.gif)
no-repeat left center; }

当然,作者可能对链接还应用了其它样式,或许所写的代码与此有一些出入,但在此我们只介绍与我们所讲的内容有关的样式内容。看了上面的例子,你是不是可以让你的Blog的链接更漂亮一些呢?

CSS背景图像另外比较常用的就是建立圆角框等。

5 条评论:

Yubao 说...

没错!我样式的图片部分是那样写的。

GG 说...

不错~支持~

sz-iris 说...

我也很郁闷Word2007啊,支持博客发布,不支持标签,最后还是要上网加...
CSS学习中!

一楠 说...

你已经被点名了 很崇拜你, 电击这里:http://yinanyaxia.blogspot.com/2007/03/blog-post_18.html

Zhang 说...

似乎背景图片载入比较慢,我的每次都是最后才载入,有时候很丑