Bloggingpro主题是一个经典的wordpress主题，整体风格简洁清爽。今天我们来看看这个主题上的评论数的样式，分析一下这样的图片反转效果是如何使用CSS来实现的。

首先，当鼠标没有经过评论数时它的样式是这样的：

但当鼠标悬停于评论数上之后，它的样式变为这样：

实际上，这个效果是通过变化文字颜色和文字的背景图片来实现的，只不过两张背景图片的大小一样，只是颜色不一样，看上去好像图片本身变化了一样。这样的变化是瞬时的，以至于当你查看评论数时，你根本不会察觉到图片的更换。但是网页下载图片是需要时间的，即使是0.01秒的延迟，眼睛也能观察的到，那么如何避免在更换图片时产生的延迟呢？通过查看Bloggingpro主题的图片文件夹我们看到，这两张图片是连接在一起的，实际上是一张图片。

这样做的好处就是避免了图片下载的延迟。当浏览器要显示页面时，需要下载颜色较浅的上半部分的图片，但是下半部分和上半部分是连接在一起的，所以同时也就下载了下半部分。当鼠标没有经过评论数的链接时，显示上半部分的图片，而当鼠标经过评论数的链接时，显示下半部分的图片。这样就达到了图片变化的效果。让我们来具体看一看如何用CSS来实现这样的效果。

首先我们需要一个链接：

<ul class="PostDetails">
<li class="PostCom"><a href="#"><span><strong>1</strong>Comment</span></a></li>
</ul>

然后我们使用以下CSS属性值：

.PostDetails{font-size:11px; font-family:'Verdana';}
.PostDetails .PostCom{list-style:none;}
.PostDetails .PostCom a{padding: 4px 0px 5px 23px; background:url(images/PostComLeft.png) no-repeat top left;}
.PostDetails .PostCom a:hover {color:#ff5a00; background-position: 0% -23px;}
.PostDetails .PostCom a span { padding: 4px 15px 5px 5px; background: url(images/PostComRight.png) no-repeat right top;}
.PostDetails .PostCom a:hover span { background-position: 100% -23px;}

解释：第一句应用了11像素大小的文字和Verdana字体。第二句去除了<li>标签的列表样式。第三句给<a>元素应用了背景图片，并且规定背景图片不重复，从容器和图片的左上角开始显示。调整了<a>元素的内边距，使得图片的上半部分能够完整的在容器内显示出来。第四句设置了鼠标经过<a>元素时，文字更改为橙色，图片将从左边和图片中间的地方开始显示，也就是显示出图片的下半部分。第五句给<span>元素应用右半部分的背景图片，并且调整<span>元素的内边距，使得左半边的图片和右半边的图片完美的结合起来。第六句调整当鼠标经过链接时背景图片的显示位置。这样在background-position属性和padding属性的帮助下，图片转换效果就做出来了。