实现的效果，后台获取的数值是9.0，那么在前台html页面显示的星星如下：
素材如下：
素材就这一张图，
搞了好长时间，不知道如何搞的，百度找的都是两张图的，新手求救这种一张图的如何实现，谢谢~！
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
7
1073
收藏
看素材有0-10一共10档，那可以这样，相应的元素宽高定好，然后
background-image定基础素材，再搞从star0到star10一共10个类，里边放对应分值的background-position定位，从后台拿到分值数据的时候去小数点转字符串，然后加个“star”前缀直接拼到类名里就行了。用类名而不是直接改css主要是性能考虑，而且类名的话后期如果出现改分需求的时候，操作也更舒服。另外也可以给元素加个0.2秒左右的过渡，这样会稍稍有点动画的效果（不宜过长，否则定位会穿帮）。
背景图，背景图位置，上移下移就好了。
要显示星星的都使用同一个背景图，然后根据后端的返回的数据修改对应的background-position即可。
可以看看这这个：css雪碧图
灰色星星一个p，金色星星一个p。星星做p的背景图。 灰色的和金色的p位置相同，金色的在上层。金色星星就好比遮罩层一样，或者就跟刮奖的涂层一个意思。
然后你调整金色星星p的宽度，比如4.5分，你就设置金色p宽度=灰色p除以10（因为有10档星级）乘以4.5 就可以了。
就这个意思，具体实现方法还有很多，喜欢哪个就用哪个。实在不行还可以去找评分星星的源码。
哎呀，不好意思，没看清你的需求。。
你这个要求就用雪碧图做。百度CSS 雪碧图。
雪碧图就是把整张图载入，需要显示哪个区域设置就好了。就是分块显示。 这图片分成一条一条的，一次显示一条就可以了。
问你们辅导班的老师啊，这种问题实在不合适
星星的状态有10种情况，你可以合成一张图片,然后通过CSS background-position来写出十个不同的class,然后从后台获取数据，对应着class即可