如何给 HTML 中的部分字符着色？

Question

在我的网站上，我使用的是五颗星的用户评分。所以每个用户可以选择一到五颗星。

我想用部分彩色星星显示平均用户评分。例如：平均评分为3.5星，三颗星应该完全着色，第四颗星应该有50%水平着色。

我正在使用 Font Awesome 显示星星。所以每个星星都是一个角色，而不是图像。

有没有不使用图像的解决方案？也许 CSS?

到目前为止，我只知道用 style="color: yellow;" 给完整字符着色的解决方案，但我想给第四个字符的 50% 着色...

Answer 1

您可以通过设置 2 个 5 颗星的实例来实现此目的，其中一组是黄色星星，另一组是灰色。将黄色的放在顶部然后将宽度设置为百分比并隐藏溢出

.rating {
  display: inline-block;
  position: relative;
  line-height: 1em;
 }
 
 .rating__overlay {
  color: yellow;
  position: absolute;
  top: 0;
  left: 0;
  width: 70%;
  white-space: nowrap;
  overflow: hidden;
}

.rating__base {
  color: #ccc;
  white-space: nowrap;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="rating">
  <div class="rating__overlay">
    <i class="fas fa-star"></i>
    <i class="fas fa-star"></i>
    <i class="fas fa-star"></i>
    <i class="fas fa-star"></i>
    <i class="fas fa-star"></i>
  </div>
  <div class="rating__base">
    <i class="fas fa-star"></i>
    <i class="fas fa-star"></i>
    <i class="fas fa-star"></i>
    <i class="fas fa-star"></i>
    <i class="fas fa-star"></i>
  </div>
</div>

如何给 HTML 中的部分字符着色？

How to color parts of character in HTML?

html

css

font-awesome