使用透明背景在HTML中创建动态图像

Question

假设我正在制作情人节应用。我想要一颗心从0到100填满粉红色，以表达对另一个人的爱。

图像的高度将是102像素，并且对于每个人都“恋爱”，我们将爬上单像素高度线。

我的方法如下：进入Photoshop并移除心脏内部的“背景”，使内部现在透明。周围心脏区域将涂成白色。穿上白色背景的网站。将图像放在102 x（无论）div上，然后将另一个div放入其中，其背景颜色为粉红色。这是一个增加孩子div高度的简单问题。

这很好，但我只能在具有白色背景的网站上使用它，因为它是防止该区域变成粉红色的白色。简而言之，我需要一种方法来填补这颗心，同时能够改变网页的背景颜色。

Answer 1

创建心脏，就像通常使背景透明并填充中心一样。使用它作为div的背景图像并将其放在底部。

以下示例显示心脏为40％。

HTML

<div class="heart-wrap">
    <div class="heart" style="height: 40px; margin-top: 60px;"> 
    </div>
</div>

CSS

.heart,
.heart-wrap {
    width: 100px;
    height: 100px;
}
.heart {
    background: transparent left bottom url('/heart.png');
}

演示：http://jsfiddle.net/UFBjh/

演示2：http://jsfiddle.net/L5uDp/

Answer 2

查看此演示。这可能是你想要的 - http://jsfiddle.net/Rhpyp/

解决方案涉及使用CSS3 <{3}}

中提到的技术绘制心脏

然后让外部div根据需要处理部分隐藏的心脏。

心脏的颜色以及用于部分隐藏它的DIV可通过CSS编辑。