Как раскрасить части персонажа в HTML? - PullRequest
Новая
       76

Как раскрасить части персонажа в HTML?

0 голосов
/ 01 мая 2020

На моем сайте я использую рейтинг пользователя с пятью звездами. Таким образом, каждый пользователь может выбрать от одной до пяти звездочек.

И я хотел бы показать средний рейтинг пользователей, с частично окрашенными звездами. Например: средний рейтинг составляет 3,5 звезды, три звезды должны быть полностью окрашены, а четвертая звезда должна иметь цвет 50% по горизонтали.

Я использую Font Awesome для показа звезды. Таким образом, каждая звезда - это символ, а не изображение.

3.5 Stars

Есть ли решение для этого без использования изображения? Может быть, с CSS?

До сих пор я знаю только решения для окраски полных символов с style="color: yellow;", но я бы хотел закрасить 50% четвертого символа ...

1 Ответ

1 голос
/ 01 мая 2020

Этого можно добиться, имея 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>
...