俗话说得好，前端切图玩的就是心机，有时候多动脑子想一想，就能避免写很多的js脚本，何乐而不为，废话少说，这次实现的的东西长下面这样：

原材料也很简单，就是两张图片，看看：

实现原理也是非常简单滴，把灰色星星作为背景，然后在上面叠加黄色星星，通过控制黄色星星的宽度，实现评分变化，是不是很简单？先来看看HTML标签：

<div class="star-eval"><span class="stars-bg"><!-- 宽度由实际数据自行计算 如4.2/5*100% --><i class="star-active" style="width: 20%"></i></span><span class="right-txt"><b>4.2</b>分</span>
</div>

CSS样式：

.stars-bg{position: relative;display: inline-block;height: 19px;width: 157px;background: url(../images/evaluate.jpg) 0 0;
}
.star-active{position: absolute;left: 0;top: 0;display: block;height: 100%;background: url(../images/evaluate.jpg) 0 -24px;
}

这样我们就不用一个个星星去拼接啦，而且宽度能精确到浮点数，不过重点是两张图片上下一定要对齐哦。

Author：事始
Sign：只要你还在尝试，就不算失败。