php - 如何动态地为星级评分中的星星着色？

Question

<分区>

Answer 1

有一个<span>元素嵌套在另一个元素中。
外层<span>有空心星星的背景图片。
内层<span>有一个彩色星星的背景图像，和一个 width:布局页面时以编程方式设置的元素。例如，width:60.0%可用于 3/5 星评级。

对于小型优化，您甚至可以使用只有一颗星的图像开始，然后使用 repeat-x 获得所有 5 颗星。您还可以拥有一个包含彩色和填充的垂直星星的图像，并在显示时裁剪以确定您引用的是哪个版本的星星。

示例 1:

例如，考虑以下 CSS:

span.rating-frame, span.rating-fill {
    background: url(../star.png) 0 -16px repeat-x;
    display: block;
    width: 80px; /* this is 5 times the width of the star, for 5 stars total */
    height: 16px;
}
span.rating-fill {
    background-position: 0 0; /* use the (filled-in) version from the top of the image */
}

和以下 HTML:

Average Rating: 4/5
<span class="rating-frame">
      <span style="width:80.0%;" class="rating-fill"> </span>
</span>

User A:  5/5
<span class="rating-frame">
      <span style="width:100.0%;" class="rating-fill"> </span>
</span>

User B: 3/5
<span class="rating-frame">
      <span style="width:60.0%;" class="rating-fill"> </span>
</span>

假设 star.png 是一张 16x32 的图像，顶部填充了星星。
宽度属性的值由 userRating/maxPossibleRating 设置四舍五入到适当的精度。当然，在显示总体平均评分的地方，它由 averageUserRating/maxPossibleRating 设置。 .

---

例子2:

OP 报告使用 <span>☆</span>反而。以下伪代码可能有助于那里的页面生成。

for (i = 1 to rating inclusive) {
    print "<span>★</span>"
}
//if including a half-star, replace this comment with the code to do so.
for (i = rating+1 to maxRating inclusive) {
    print "<span>☆</span>"
}

但是除非你有一个半填充的星号，否则你将无法在你的输出中使用它。您可以尝试改用 ½ 字符。

---

示例 3:

eBay 示例 OP 链接使用如下来源:

   <span class="display-text-rating">3.7 stars</span>
   <div class="star-rating-section" title="3.7 out of 5 stars">
     <span class="star-rating" role="img" aria-label="3.7 stars">
         <i class="fullStar"></i>
         <i class="fullStar"></i>
         <i class="fullStar"></i>
         <i class="midStar"></i>
         <i class="emptyStar"></i>
      </span>
    </div>

第一行是打印文本，以文本形式显示评分。
div 标题显示有关鼠标悬停的信息。
span 中带有类属性的元素可以很容易地以编程方式生成，如示例 2 所示。CSS 可以设置为对 fullStar、midStar 和 emptyStar 使用不同的图像。可以在用户个人评分所在的部分为每个用户重复此生成过程。

示例 3 的缺点是在视觉上四舍五入到最近的半星(示例 2 是全星)，而示例 1 允许更细粒度地区分分数星，而不需要额外的编程或图像创建. 决定适当的舍入水平是UX.SE 的问题。 (如果有人真的关心这个问题，请在此处编辑链接)。