如何在要設置尺寸的圖像上疊加文字？

我正在試圖製作一張使用表格的條形圖，而我幾乎完成了我的喜好。我想要的最後一步是在我的圖像上代表酒吧的文字。下面是代碼我迄今建立我的小條形圖：如何在要設置尺寸的圖像上疊加文字？

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

這會產生這樣的：

enter image description here

您可以在代碼中看到我是如何簡單地計算長度的酒吧根據啤酒廠評級。接下來我要做的是在左側的每個釀酒廠的頂部顯示評級數字。我將如何去完成這件事？

更新：

我嘗試了教程中，我讀到這裏：

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>

它確實把我的圖像的任何價值的兒子頂部。所有的文字是在上述這樣所有的酒吧名單：

enter image description here

在我標誌着答案響應使用後幫，這裏是結果：

enter image description here

現在我只需要弄清楚如何垂直居中放置所有東西，這樣灰色的背景看起來更漂亮。謝謝您的幫助！

來源

2012-10-04 Mike

你可以用這個替換您的打印代碼：

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文件，並與不斷變化的頂部，左側可以重新定位範圍爲評級號碼。

來源

2012-10-04 03:38:21 EGurelli

錯誤的HTML使用情況我已更正您的設置。其實我的迴應有更好的CSS只是硬編碼。不要忘了**的z-index ** '打印「 $計數 $brewR

$brewAvg

」;' – EGurelli

真棒，感謝您的幫助。我只是將頂部更改爲4像素，而且非常完美！ – Mike

我添加了一張圖片來顯示它的工作，再次感謝 – Mike

你不必做任何形式的黑魔法就可以實現這個目標。只需將啤酒廠的名稱和等級放在同一個td中，也許用div隔開。該號碼也可以在td中，以便它可以垂直對齊。例如：

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

來源

2012-10-04 03:38:31

如何在要設置尺寸的圖像上疊加文字？

回答

相關問題