基于星形的评级与十进制值不准确

Question

我有一个基于星级的评级，其十进制值有效，但看起来不准确，除非评级为整数。例如，当评级为3.7时，它看起来像：

当例如3.4看起来像：

。

反正看起来有点准确吗？

我使用jQuery更改排名值，方法是从表中取一个值，然后将宽度乘以20来改变宽度，以便按以下方式获得百分比值：

var starRating1 = table[0][4] * 20;
$('#star-ratings-top1').width(starRating1 + '%');

.star-ratings {
  float: left;
  display: block;
  unicode-bidi: bidi-override;
  color: pink;
  font-size: 40px;
  height: 30px;
  position: relative;
  margin-left: 10px;
}

.star-ratings .star-ratings-top {
  color: gold;
  padding: 0;
  position: absolute;
  z-index: 1;
  display: block;
  left: 0px;
  overflow: hidden;
}

.star-ratings .star-ratings-bottom {
  z-index: 0;
}

<div class="star-ratings">
  <div class="star-ratings-top" id="star-ratings-top1">
    <span>★</span>
    <span>★</span>
    <span>★</span>
    <span>★</span>
    <span>★</span>
  </div>
  <div class="star-ratings-bottom">
    <span>☆</span>
    <span>☆</span>
    <span>☆</span>
    <span>☆</span>
    <span>☆</span>
  </div>
</div>

Answer 1

你也可以尝试其他方式..找到一个包含所有等级（3.4,3.7）的图像..并相应地给它左上角位置

＆＃13;

＆＃13;

.small-star-rating {
	background-image: url(https://hostingpill.com/cheap-web-hosting/newimages/small-stars.png);
	background-repeat: no-repeat;
	height: 0.7rem;
	width: 6.1428571429rem;
        position: relative;
        top: 1.0714285714rem;
        left: 1.4285714286rem;
}
.small-star-rating.stars-4 {
	background-position: 0 -15px;
}

＆＃13;

<div class="small-star-rating stars-4"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可能需要设计师，而不是编码帮助。

以下内容如何： 1）使星级星级 - 底部中的星星变成黑色 2）放置在灰色背景上