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

【问题标题】：How do I overlay text on an image who's size is to be set?如何在要设置大小的图像上叠加文本？
【发布时间】：2012-10-04 12:00:18
【问题描述】：

我正在尝试使用表格制作条形图，我几乎已经按照自己的喜好完成了。我想要的最后一步是在我的图像上显示代表栏的文本。这是迄今为止我构建小条形图的代码：

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

它确实将任何有价值的儿子放在了我的图像之上。所有文本都在所有条形上方的列表中，如下所示：

在回复中使用帮助后，我标记了答案，结果如下：

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

【问题讨论】：

标签： php html css image

【解决方案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 以获得评级编号。

【讨论】：

HTML 使用错误我已更正您的设置。实际上我的回复有更好的 CSS 只是硬编码。不要忘记 z-index print " <tr valign=\"middle\" > <td > $count. <a href=\"$breweryURL\"> $brewR</a> </td> <td class=\"overlay\" > <img src=\"blueBar.png\" width=\"$width\" height=\"$height\"> <div class=\"text\"><p> $brewAvg </p> </div> </td> </tr> ";
太棒了，感谢您的帮助。我刚把 top 改成了 4px 就完美了！
刚刚注意到这在 Firefox 中不起作用。所有应该在蓝色条上的数字都在页面左上角彼此重叠
您好，请提供一个网址，以便我发布修复。
这里是由于 CSS 2.1 TD position: relative is undefined 的快速修复，你应该把你的元素放在一个 div 包装器中。刚刚在firefox上测试过，一切正常。包装器：<div style="position: relative;"></div> 你的代码：<td><div style="position: relative;"><img width="384.003" height="25" src="blueBar.png" 8;"="" "z-index:="" style="padding-top:5px;"> <span style="position: absolute; top: 7px; left: 10px; color:#fff; z-index: 9; font-size: 14px;">4.2667</span></div></td>

【解决方案2】：

您不必使用任何黑魔法来实现这一点.. 只需将啤酒厂名称和评级放在同一个td 中，也许用 div 分隔。该数字也可以在td 中，因此可以垂直对齐。比如：

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

【讨论】：