如何在要设置大小的图像上叠加文本？

Question

I am trying to make a bar chart using tables, which I have almost accomplished to my liking. The last step I want is text over my image which represents the bar. Here is the code I have thus far for building my little bar charts:

$height = 50;

//build length
$width = 450;
$multi = $brewAvg / 5;
$width = $width * $multi;
print " <tr > <td > $count.  <a href=\"$breweryURL\"> $brewR</a>  </td>   <td > <img src=\"blueBar.png\"  width=\"$width\" height=\"$height\">  </td>  </tr> ";

And this produces something like this:

You can see in the code how I simply calculate the length of the bar based on a breweries rating. What I want to do next is have the rating number show on top of each breweries on the left hand side. How would I go about accomplishing this?

Update:

I tried a tutorial I read here:

http://www.kavoir.com/2009/02/css-text-over-image.html

and I changed my code to this:

print "<div class=\"overlay\"> ";
            print " <tr valign=\"middle\" > <td > $count.  <a href=\"$breweryURL\"> $brewR</a>  </td>   <td > <img src=\"blueBar.png\"  width=\"$width\" height=\"$height\">  </td>  </tr> ";
            print" 
                <div class=\"text\">
                <p> $brewAvg  </p>
                  </div>
                </div>
            ";

And my css I added was this:

<style>
.overlay {
    position:relative;
    float:left; /* optional */
}
.overlay .text {
    position:absolute;
    top:10px; /* in conjunction with left property, decides the text position */
    left:10px;
    width:300px; /* optional, though better have one */
}


</style>

And it did put any of the value son top of my images. All the text is in a list above all the bars like this:

After using the help in the response I marked the answer, here is the result:

Now I just need to figure out how to vertically center everything so the grey background looks nicer. Thanks for the help!

Answer 1

You can replace your print code with this one :

print " <tr > <td > $count.  <a href=\"$breweryURL\"> $brewR</a>  </td>   <td style=\"position: relative;\"> <img style=\"z-index: 8;\" src=\"blueBar.png\"  width=\"$width\" height=\"$height\"> <span style=\"position: absolute; top: 10px; left: 10px; color:#fff; z-index: 9; font-size: 14px;\">$brewAvg</span> </td>  </tr> ";

Of course I have hard-coded you can move appropriate style to your CSS file, and with changing top, left you can re-position the span for rating number.

Answer 2

You don't have to do any sort of black magic to achieve this .. just put the brewery name and rating in the same td , perhaps separated by a div. The number can also be in a td so it can be vertically aligned. Something like:

<td>1.</td>
<td>Rating<br><a>Company</a></td>
<td><img></td>