最近做项目做到一个五星评分的，这个分数的显示，要精确到小数，就是如果分数是4.3分，就显示4.3颗星星，这个看上去好像挺难的，但是做起来很简单。
首先我们整理一下思路，这效果要怎么做出来，因为这个分数的原因，很容易让人联想到进度条，所以就想到了用遮罩来出来。做法很简单，灰色星星的图片放在下面，然后亮色星星的图片在上面，重叠两张图片，任何控制上面亮色的星星图片，根据分数显示它的长度，这样便能实现这个效果了。废话不多说，直接把代码贴上。
<meta charset="utf-8"> <style type="text/css">#bg{ width: 60px; height: 16px; background: url("img/star_gray.png");}#over{ height:16px; background:url("img/star_org.png") no-repeat;}</style> <div id="bg">
<!--这里是背景，也就是灰色的星星--> <!--说明，这里的width就是设置分数啦，以我写的为例，一个星星的长度是12px，也就是1分12px，如果是4.3分，就是4.3*12px = 51.6px的长度，当然这个一般是取得数据后用js或者其他模板语言去控制的--> <div id="over" style="width:51.6px"></div>
<!--这里是遮罩，设置宽度以达到评分的效果--> </div>
想要看五星打分的效果实现，看我的下一篇博客。
PS：这是五星显示和打分的源文件以及图片素材http://pan.baidu.com/s/1c0ruT3q
Author：立礼
Sign：人生不要有太多的幻想，而要有更多的行动。
版权声明：本文为博主原创文章，未经博主允许不得转载。
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
