Question

我有两个图像，每个图像是并排的五颗星，但一个是黄色而另一个是蓝色。像下面这样的东西（谷歌抓住）：

Stars

我希望将图像叠加在一起，并且＆＃34;隐藏＆＃34;顶部图片的一部分取决于用户对产品的评分。

例如：假设图像为50x10px。我重叠它们，使黄色在蓝色的顶部。评论见5/5;图像没有变化。评论发布于4/5;仅显示黄色星形图像的前40px，剩下的10px显示蓝色星形（因此它在同一图像中显示为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>

Answer 2

在您的CSS中，您可以使用 CSS Clip Property 裁剪img：

.Yellow4Stars {
    position: absolute;
    clip: rect(0px,40px,10px,0px);
}

.Yellow3Stars {
    position: absolute;
    clip: rect(0px,30px,10px,0px);
}

假设完整5颗星的宽度为50px，高度为10px。

Answer 3

你为什么不试试这个：

<html>
<head>
<style type="text/css">
.under
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
.over
{
position:absolute;
left:40px;
top:10px;
z-index:-1;
}
</style>
</head>

<body>
<img src="http://path-to-image" width="184" height="46" class="under" />
<img src="http://path-to-image" width="184" height="46" class="over" />

</body>

调整css以进行正确定位。

隐藏图像宽度的百分比

3 个答案: