最近我开始每周放出一个 ElegantTheme 的付费主题下载，想在主题介绍栏目中插入一个静态的五角星评分效果，反映出该主题的推荐和热门程度。
实现方法有两种，一种利用WP插件实现，例如 GD Rating star 插件就可以在Posts、Widgets、Pages中实现各种样式的评分效果，但大多是为了实现动态效果远超我的需要，而且1.5M的体积只会让我臃肿的WP系统雪上加霜。
另一种就是采用 PS + CSS 来实现：这种方法只需要基本的 PS 功底和几段简单易懂的 CSS 代码就可以搞定。下面我重点讲一下实现方法：
首先从搜索引擎上下载一个后缀名为 PNG 且背景为透明的五角星图形，然后用 PS 中的魔棒和图层工具将其复制拼接成下面图形：
拼接图片过程中应注意以下几点：
- 应保存为背景为透明的PNG文件，使得其能够和各种背景色的WP主题相搭配；
- 保存文件时，图片长度像素最好为5和2的公倍数，例如120，240，360等；图片宽度像素则应为2的公倍数；这样做主要为了方便下面 CSS 代码实现平移效果使用；
- 整个图片拼接过程需要一些 PS 基础，如果不愿意制作，也可以直接使用我做的模板；
- 我做的图形模板长度为254 pixels，不能为5整除，所以导致后面 CSS 代码中的不整齐，所以还是建议各位遵守第二项中要求的长度像素因为5和2的要求，当然如果达不到，也可以通过后面的 CSS 进行调整；
将做好的图片文件上传到WP服务器，假设图片路径为：” www.example.com/wp-content/uploads/example.png “。 接下来我们打开Style.CSS文件，在其尾部加上如下代码：
Style.CSS
.rating-static {
width: 127px; /*将图片长度分为一半*/
height: 25px; /*将图片宽度分为一半*/
display: inline-block; /*这里表示不需换行，如果值是block，则需要换行显示*/
background: url('http://www.example.com/wp-content/uploads/example.png') 0 0 no-repeat;
} /*引用做好的图片*/
接下来我们继续添加代码：
Style.CSS
.rating-50 { background-position: 0 0; } /*这是显示五星的效果*/
.rating-40 { background-position: -26px 0; } /*因为范例图片中长度无法被五整除，所以加了1px进行调整*/
.rating-30 { background-position: -51px 0; } /*因为范例图片中长度无法被五整除，所以加了1px进行调整*/
.rating-20 { background-position: -75px 0; } /*这是现实两星的效果*/
.rating-10 { background-position: -100px 0; }
.rating-0 { background-position: -125px 0; }
/*以上评1-5颗星的代码 */
.rating-5 { background-position: -100px -25px; } /*这是显示半颗星的效果*/
.rating-15 { background-position: -75px -25px; }
.rating-25 { background-position: -51px -25px; }
.rating-35 { background-position: -26px -25px; }
.rating-45 { background-position: 0 -25px; } /*这是显示4颗半星的效果*/
/*以上是评半星的代码*/
代码很简单，就是通过对 background-position 起始位置的不断调整从而实现五颗星的效果，下面我们看看在文章中调用后的效果：
<span class="rating-static rating-15"></span>/*这是显示1颗半星的效果*/
我们再试一个：
<span class="rating-static rating-40"></span>/*这是显示4颗星的效果*/
其他的显示方法一次类推，我就不再一一复述了，不过我觉得这个方法还是略显复杂，特别是要求使用者具备一些基础的 PS 操作技巧，如果列位有更好的办法，欢迎与我分享。E