今天，我们还是说背景图片的利用，不过，会稍微复杂一点，帮助你更好的理解如何设置CSS。

大家可以看到，我发表的每一篇blog的标题前面都有一个小图标，这个图片是我用word的图标改的，并上传到我的相册中。

引用地址为：http://blog.donews.com/images/blog_donews_com/laobai/68887/o_blog.gif

为了把这个图标插入到标题前面，我们首先要找到标题是如何控制的，还是通过查看源代码，我们发现如下语句：

<div class="postTitle">
<a href="http://blog.donews.com/laobai/archive/2005/08/18/515585.aspx">这个也值得炒作吗？</a>
</div>

这个层，引用了名称为postTitle的CSS样式。

要想改变它的外观，就要修改这个样式的设置。

因此，我们在自定义CSS中，输入如下内容。

.postTitle {
background: url(http://blog.donews.com/images/blog_donews_com/laobai/68887/o_blog.gif) no-repeat;
padding-left: 20px;
}

备注：如果你已经定义过这个样式，那么找到这个样式，把上面中间那两行加入到大括号中。

相信你注意到了，通过CSS样式改变显示设置，class名称前面是.,而以前，我们介绍的通过ID改变显示，使用的是#。

做完上述功课后，你会发现，你所有的标题前面都有了一个小图标。

不过，当你访问每个Blog自己的独立页面时，你会突然发现，在回复评论区，每条回复标题前面，也加上了同样的图片。对我而言，觉得不太合适，至少这个图标含义和回复没什么关系。

于是，我检查了一下回复区域的源代码，发现，回复评论标题采用了同样命名为postTitle的CSS样式。

<div class="post">
<div class="postTitle">
<a href="http://blog.donews.com/moriz13" target="_blank" rel="nofollow">十三郎！</a>&nbsp;发表于2005-08-18 11:56 PM&nbsp;&nbsp;IP: 218.80.244.*
</div>
<div class="postText">
这莫非是传说中的沙发？
<br>哈哈 俺作了！
<br>老白大哥，再来一个系列！俺帮您卖出去！
</div>
</div>

那么，是否就只能保持同样的设置了呢？

进一步研究源文件，发现整个回复评论的内容，是被装在一个<div id="comments">的层里面的，这样，就好办了。

我们可以针对这个id="comments"层里的postTitle，单独设置显示风格。

在自定义CSS中，加入的代码如下：

#comments .postTitle {
background: url(http://blog.donews.com/images/blog_donews_com/laobai/68887/o_em_38.gif) no-repeat;
padding-left: 22px;
height: 20px;
}

首先，#说明了这个设置针对的是Id为comments的元素，后边的.postTitle说明了针对的是名为postTitle的CSS样式，结合起来看，就是改变ID为Comments的层中所有引用了postTitle样式的元素外观。

然后，我换了一个图片文件作为背景，一个摇头表示不同意的小人脑袋，这样，就和在正文区的图标区分开了。

最后一行，我还设置了一下这个回复标题行的高度，充分让这个图标显示出来。当然，另外一种办法，是改变那个图标文件的尺寸大小。