Javascript 隐藏图像的%x27；s宽度_Javascript_Php_Html_Css_Image

Javascript 隐藏图像的%x27；s宽度

javascript php html css image

Javascript 隐藏图像的%x27；s宽度,javascript,php,html,css,image,Javascript,Php,Html,Css,Image,我有两张照片，每一张都是五星并排的，但一张是黄色的，另一张是蓝色的。类似以下内容（摘自谷歌）：我希望将这些图像重叠在一起，并根据用户对产品的评论分数“隐藏”顶部图像的一部分例如：假设图像是50x10px。我把它们重叠起来，使黄色在蓝色的上面。五分之五的时间进行回顾；图像不变。审查分为4/5次；只显示黄色星形图像的前40像素，剩下的10像素显示蓝色星形（因此在同一图像中它将显示为4个黄色，1个蓝色星形）。我可以只隐藏黄色图像的一部分，只需使用两幅图像即可获得0/5到5/5的完整范围如何使用

我有两张照片，每一张都是五星并排的，但一张是黄色的，另一张是蓝色的。类似以下内容（摘自谷歌）：

我希望将这些图像重叠在一起，并根据用户对产品的评论分数“隐藏”顶部图像的一部分

例如：假设图像是50x10px。我把它们重叠起来，使黄色在蓝色的上面。五分之五的时间进行回顾；图像不变。审查分为4/5次；只显示黄色星形图像的前40像素，剩下的10像素显示蓝色星形（因此在同一图像中它将显示为4个黄色，1个蓝色星形）。我可以只隐藏黄色图像的一部分，只需使用两幅图像即可获得0/5到5/5的完整范围

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

为什么不尝试以下方法：

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


在下面
{
位置：绝对位置；
左：0px；
顶部：0px；
z指数：-1；
}
结束
{
位置：绝对位置；
左：40px；
顶部：10px；
z指数：-1；
}

调整css以正确定位

在CSS中，您可以使用将您的

img

裁剪为：

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

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

假设整个5颗星的宽度为

50px

，高度为

10px

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

.rating{
背景图片：url(http://i.stack.imgur.com/gDqPE.png); 
高度：100px；
宽度：100px；
}
.一颗星{
宽度：115px；
}
.半颗星{
宽度：150px；
}
.双星{
宽度：190px；
}
.两颗半星{
宽度：225px；
}
.三星{
宽度：265px；
}
.三颗半星{
宽度：304px；
}
.四星级{
宽度：340px；
}
.四颗半星{
宽度：378px；
}
.五星级{
宽度：414px；
}

您是否尝试过使用

溢出：隐藏将图像覆盖到
容器中，并控制容器的宽度？您是否考虑过使用图标字体进行此操作？是否有一种方法可以将变量传递给HTML属性？我不希望每个分数有10个或更多的CSS类，而是动态地改变图像。如果图像是标准大小，您可以设置百分比宽度。