Creating a dynamic image in HTML with a transparent background - html

Question

Let's say I'm making a Valentine's Day app. I want a heart to fill up with pink from 0 to 100 to show one's love for another.
The height of the image will be 102 pixels, and for every % someone is "in love", we will creep up a single-pixel height line.
My approach is as follows: go into Photoshop and remove the 'background' of the inside of the heart, so that the inside is now transparent. The area of the surrounding heart will be painted white. Put on a site with a white background. Put the image on a 102 x (whatever) div, then put another div inside, whose background color is pink. It's then a simple matter of increasing the child div's height.
This is nice, but I can only use it on sites which have a white background, because it's the white that's preventing the area from turning pink. In short, I need a way to fill up this heart while being able to change the background color of the web page.

Answer 1

Create the heart as you normally would making the background transparent and fill in the center. Use that as the background image of a div and position it at the bottom.
The example below shows a heart at 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');
}
Demo: http://jsfiddle.net/UFBjh/
Demo2: http://jsfiddle.net/L5uDp/

Answer 2

Check out this demo. This is probably what you want - http://jsfiddle.net/Rhpyp/
The solution involves drawing out the heart using CSS3 using the technique mentioned in http://www.webfroze.com/css/heart-shape/
And then having an outer div handle the partial hiding of the heart as needed.
The color of the heart as well as the DIV that is used for partially hiding it is editable via CSS.