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来截取部分图片来呈现。