You can use a span to show an effectively cropped image instead of the image tag.
.star_background { width: 22px; height: 20px; background-image: url(star_empty.png); background-repeat: no-repeat;}.star_foreground { display: block; width: 11px; height: 20px; background-image: url(star_full.png); background-repeat: no-repeat;}
<div class="star_background"><span class="star_foreground"></span></div>
The star_foreground class here has width 11px, to show the star half full.
By the way, those two images aren't exactly aligned - the empty one is 1 pixel smaller in both dimensions so when you use the above css/html it looks off - fixing the images so they are the same size (and match up) should fix it.
If I want to show a partly filled star, is it possible to do this with CSS trickery, without having to actually create the intermediate images? I get the feeling that I should be able to, using overflow and so on, but it would probably take me a whole day to figure it out :)
