javascript - 使用javascript的男性女性百分比分布动态图像

Question

我在这里使用女性和男性的图像作为 Logo ，我正在通过 javascript 计算百分比，但图像是静态的，我想将其转换为动态。

意味着假设这里女性的百分比是 55%，那么在图像中我们将 Logo 视为一半填充和一半空白。但如果我们得到的结果百分比为女性 10%，那么我的 Logo 看起来也与图像中所示的相同。因为它是静态图像。我想让它动态化。 我是 css、javascript 的新手。 任何起点或引用链接也会对我有帮助。 提前致谢。

Answer 1

您可以尝试这个概念:

HTML:

<span class="percentage"><span style="height:45%;"></span></span>

CSS:

.percentage {
    width:41px;
    height:97px;
    display:inline-block;
    position:relative;
    background:url(gray.png) no-repeat left bottom;
}
.percentage span {
    width:100%;
    height:0;
    display:inline-block;
    position:absolute;
    left:0; bottom:0;
    background:url(blue.png) no-repeat left bottom;
}

图片:

Demo Link: