css实现星级商户评分

之前看到大众点评中有星级商户这样的标签感到挺有意思的，就偷偷模仿了下。

其实，大众点评的星级商户的样式并没有用到什么复杂的插件，只靠css就能轻松的实现，并且可以动态的控制。好了，闲话不说了，先来看看怎么来做吧。首先，我们需要一张图片，如下所示：

（注：这里的图片只是截图，实际请参考http://si1.s1.dpfile.com/s/c/app/freezer/i/remark.59fe11cf3d5f6bbbecbba26a16dc5cc9.png）

然后写下我们所需的样式

.item-rank-rst{background-image: url(<?php echo $this->_theme->baseUrl?>/views/img/around/start.png);background-repeat: no-repeat;width:64px;height:12px;margin:5px 12px 0 0;text-indent:-9999px;overflow:hidden;}.irr-star0{<span style="white-space:pre"></span>background-position:0 -170px;}.irr-star05{<span style="white-space:pre"></span>background-position:0 -153px;}.irr-star10{<span style="white-space:pre"></span>background-position:0 -136px;}.irr-star15{<span style="white-space:pre"></span>background-position:0 -119px;}.irr-star20{<span style="white-space:pre"></span>background-position:0 -102px;}.irr-star25{<span style="white-space:pre"></span>background-position:0 -85px;}<span style="white-space:pre"></span>.irr-star30{<span style="white-space:pre"></span>background-position:0 -68px;}.irr-star35{<span style="white-space:pre"></span>background-position:0 -51px;}.irr-star40{<span style="white-space:pre"></span>background-position:0 -34px;}.irr-star05{<span style="white-space:pre"></span>background-position:0 -17px;}.irr-star50{<span style="white-space:pre"></span>background-position:0 0px;}

再在页面上写上我们要用的标签，这里我们用div

<div class='item-rank-rst irr-star35"' title=''></div>

这样就能实现星级评分的效果，如下所示：

改效果的实现原理就是通过css来截取部分图片来呈现。