- <div class="star_evaluate">
- <span class="star star_10"></span>
- </div>
- .star_evaluate{
- position: relative;
- display: inline-block;
- width: 100px;
- height:16px;
- background: url("./../../public/img/star_gray.png") no-repeat;
- background-size:cover;
- overflow: hidden;
- .star{
- position: absolute;
- top:0;
- left:0;
- display: inline-block;
- height:16px;
- background: url("./../../public/img/star.png") no-repeat;
- background-size:cover;
- overflow: hidden;
- }
- .star_1{
- width:8px;
- }
- .star_2{
- width:21px;
- }
- .star_3{
- width:29px;
- }
- .star_4{
- width:42px;
- }
- .star_5{
- width:50px;
- }
- .star_6{
- width:63px;
- }
- .star_7{
- width:71px;
- }
- .star_8{
- width:84px;
- }
- .star_9{
- width:92px;
- }
- .star_10{
- width:100px;
- }
- }

效果如图,通过定位放两张背景图,外层的放灰色的5颗星图,内层的也是,宽度根据不同级别来展示,从而实现,
star_1 ,代表半颗星,star_2 代表1颗星,以此类推,即默认比如2.5颗星乘2就是class的后缀数字,以此可以动态展示
要注意这个星星默认为16px*16px,间距5px,展示的星星宽度记得计算间距。
之前看过网友的实现方式,有通过一个星星平铺,来显示的,但是平铺的这种方式应该是不可以让星星之间产生间距的,如果有大神有办法,请一定告诉我,谢谢!
如有写的不对的地方,还请大家多多指正,感谢查看!