求教如何用js或css 根据数值在页面上显示星星

Question

实现的效果，后台获取的数值是9.0，那么在前台html页面显示的星星如下：

素材如下：

素材就这一张图，
搞了好长时间，不知道如何搞的，百度找的都是两张图的，新手求救这种一张图的如何实现，谢谢~！

Answer 1

看素材有0-10一共10档，那可以这样，相应的元素宽高定好，然后background-image定基础素材，再搞从star0到star10一共10个类，里边放对应分值的background-position定位，从后台拿到分值数据的时候去小数点转字符串，然后加个“star”前缀直接拼到类名里就行了。
用类名而不是直接改css主要是性能考虑，而且类名的话后期如果出现改分需求的时候，操作也更舒服。另外也可以给元素加个0.2秒左右的过渡，这样会稍稍有点动画的效果（不宜过长，否则定位会穿帮）。

Answer 2

背景图，背景图位置，上移下移就好了。

Answer 3

要显示星星的都使用同一个背景图，然后根据后端的返回的数据修改对应的background-position即可。
可以看看这这个：css雪碧图

Answer 4

灰色星星一个DIV，金色星星一个DIV。星星做DIV的背景图。 灰色的和金色的DIV位置相同，金色的在上层。金色星星就好比遮罩层一样，或者就跟刮奖的涂层一个意思。

然后你调整金色星星DIV的宽度，比如4.5分，你就设置金色DIV宽度=灰色DIV除以10（因为有10档星级）乘以4.5 就可以了。

就这个意思，具体实现方法还有很多，喜欢哪个就用哪个。实在不行还可以去找评分星星的源码。

---

哎呀，不好意思，没看清你的需求。。

你这个要求就用雪碧图做。百度CSS 雪碧图。

雪碧图就是把整张图载入，需要显示哪个区域设置就好了。就是分块显示。 这图片分成一条一条的，一次显示一条就可以了。

Answer 5

问你们辅导班的老师啊，这种问题实在不合适

Answer 6

星星的状态有10种情况，你可以合成一张图片,然后通过CSS background-position来写出十个不同的class,然后从后台获取数据，对应着class即可

Answer 7

"★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);

出自：https://www.zhihu.com/questio...