0

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

图像的高度为 102 像素，每 % 有人“恋爱”，我们将爬升一个单像素高度线。

我的做法如下：进入 Photoshop 并去除心脏内部的“背景”，使内部现在是透明的。周围心脏的区域将被涂成白色。放在一个白色背景的网站上。将图像放在 102 x（随便）的 div 上，然后将另一个 div 放入其中，其背景颜色为粉红色。然后，增加子 div 的高度就很简单了。

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

4

2 回答 2

3

像往常一样创建心脏，使背景透明并填充中心。将其用作 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/

于 2012-09-24T19:07:31.827 回答
2

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

该解决方案涉及使用 CSS3 使用http://www.webfroze.com/css/heart-shape/中提到的技术绘制心脏

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

在此处输入图像描述

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

于 2012-09-24T19:27:42.333 回答