javascript - 隐藏图像宽度的百分比

Question

我有两张图片，每张都是并排的五颗星，但一张是黄色的，另一张是蓝色的。像下面这样的东西(从谷歌抓取):

我想将图片相互重叠，并根据用户对产品的评价分数“隐藏”顶部图片的一部分。

例如:假设图像为 50x10 像素。我将它们重叠，使黄色位于蓝色之上。评论是 5/5；图像没有变化。评论来自 4/5；只显示黄色星星图像的前 40 像素，剩下的 10 像素显示蓝色星星(因此在同一图像中它会显示为 4 个黄色，1 个蓝色星星)。我可以只隐藏黄色图像的一部分，只使用两张图像来获得 0/5 到 5/5 的完整范围。

如何使用 HTML、CSS、PHP 和/或 JS 来实现这一点？

Answer 1

只需使用背景图像并设置宽度即可。 (我只是用了你的图片，但更好的图片会更容易)

.rating { 
  background-image: url(http://i.stack.imgur.com/gDqPE.png); 
  height: 100px;
  width: 100px;
}

.one-star {
    width: 115px;  
}
.one-half-star {
    width: 150px;  
}
.two-star {
    width: 190px;  
}
.two-half-star {
    width: 225px;  
}
.three-star {
    width: 265px;  
}
.three-half-star {
    width: 304px;  
}
.four-star {
    width: 340px;  
}
.four-half-star {
    width: 378px;  
}
.five-star {
    width: 414px;  
}

<div class="rating one-star"></div>
<div class="rating one-half-star"></div>

<div class="rating two-star"></div>
<div class="rating two-half-star"></div>

<div class="rating three-star"></div>
<div class="rating three-half-star"></div>

<div class="rating four-star"></div>
<div class="rating four-half-star"></div>

<div class="rating five-star"></div>