通过CSS应用背景图像

发布者： 咖啡鱼 于 17:40

因为喜欢新的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背景图像另外比较常用的就是建立圆角框等。