如何为 HTML 中的字符部分着色？答案

【问题标题】：How to color parts of character in HTML?如何为 HTML 中的字符部分着色？
【发布时间】：2020-08-15 14:38:22
【问题描述】：

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

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

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

是否有解决方案，而不使用图像？也许用 CSS？

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

【问题讨论】：

您介意分享您取得的成就吗？
如前所述，我可以使用给定的 CSS 代码为完整的星星着色。
你想让它在悬停时出现？

标签： html css font-awesome

【解决方案1】：

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

.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>

【讨论】：