隐藏图像宽度%
隐藏图像宽度%
提问于 2014-11-24 18:10:46
我有两张照片，一张是五星并排的，一张是黄色的，另一张是蓝色的。如下所示(从Google抓取)：
我想要重叠的图像在对方之上，并“隐藏”部分的顶部图像取决于用户的评论评分的产品。
例如:假设图像为50x10px。我把它们重叠起来，使黄色在蓝色的顶部。评论以5/5的形式出现；图像不变。评论在4/5中出现；只显示黄星图像的前40 as，剩下的10 as显示蓝星(因此在同一图像中显示为4颗黄色，1颗蓝星)。我可以只是隐藏部分黄色图像，以获得一个完整的范围0/5到5/5，只使用两个图像。
如何使用HTML、CSS、PHP和/或JS实现这一点？
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-11-24 18:19:03
使用只需使用背景图像和设置宽度。(我只是用了你的形象，但是一个更好的形象会使它更容易)
.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>
Stack Overflow用户
发布于 2014-11-24 18:18:57
在CSS中，可以将img裁剪为CSS剪辑属性，如下所示：
.Yellow4Stars {
position: absolute;
clip: rect(0px,40px,10px,0px);
}
.Yellow3Stars {
position: absolute;
clip: rect(0px,30px,10px,0px);
}假设整个5颗恒星的宽度是50px，高度是10px。
Stack Overflow用户
发布于 2014-11-24 18:17:37
你为什么不试试这个：
<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以进行适当的定位。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27111386
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号