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

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>

它确实把任何值(value)放在了我的图片之上。所有文本都在所有栏上方的列表中，如下所示:

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

现在我只需要弄清楚如何将所有内容垂直居中以使灰色背景看起来更漂亮。感谢您的帮助!

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。