css定位實現星級展示沒有交互

<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，展示的星星寬度記得計算間距。

之前看過網友的實現方式，有通過一個星星平鋪，來顯示的，但是平鋪的這種方式應該是不可以讓星星之間產生間距的，如果有大神有辦法，請一定告訴我，謝謝！

如有寫的不對的地方，還請大家多多指正，感謝查看！