如何在要设置尺寸的图像上叠加文本？

Question

我正在尝试使用表格制作条形图，我几乎已经完成了我喜欢的表格。我想要的最后一步是在我的图像上显示代表条形图的文本。这是我到目前为止构建我的小条形图的代码：

$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> ";

这就产生了这样的东西：

您可以在代码中看到我如何根据啤酒厂评级简单计算出酒吧的长度。我接下来要做的是在左侧的每个啤酒厂顶部显示评级编号。我将如何完成这项工作？

更新

我尝试了我在这里阅读的教程：

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

我将代码更改为：

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>
            ";

我添加的css是这样的：

<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>

它确实把任何有价值的儿子置于我的影像之上。所有文本都在列表中，如下所示：

在使用响应中的帮助后，我标记了答案，结果如下：

现在我只需要弄清楚如何垂直居中，以便灰色背景看起来更好。谢谢你的帮助！

Answer 1

您可以使用以下内容替换您的打印代码：

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> ";

当然我有硬编码，您可以将适当的样式移动到您的CSS文件中，并且通过更改顶部，左侧，您可以重新定位 span 作为评级编号。

Answer 2

你不需要做任何黑魔法来实现这一点。只需将啤酒厂的名称和等级放在同一个td中，也许用div分隔。该数字也可以在td中，因此可以垂直对齐。类似的东西：

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