对链接应用背景图像

对链接应用背景图像

背景图像在网页设计中的应用是非常广泛的，下面再举一个我们司空见惯的例子。我随意找了一个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背景图像另外比较常用的就是建立圆角框等。