Текст в верхней части изображения

Question

Я хочу создать навигационную панель, причем каждый элемент имеет собственное изображение с именем элемента, написанного поверх этого. Поэтому должно быть несколько изображений подряд, и каждый из них имеет текст, написанный на нем. Это ряд изображений, которые я получил:

<div class="navigation" align="center"> 
<a href="link1"><img src="images/bn_blue.png" width="120" height="70" alt="" /></a> 
    <a href="link2"><img src="images/bn_blue.png" width="120" height="70" alt="" /></a> 
    <a href="link3"><img src="images/bn_blue.png" width="120" height="70" alt="" /></a> 
    <a href="link4"><img src="images/bn_blue.png" width="120" height="70" alt="" /></a> 
    <a href="link5"><img src="images/bn_blue.png" width="120" height="70" alt="" /></a> 
    <a href="link6"><img src="images/bn_blue.png" width="120" height="70" alt="" /></a> 
</div> 

Answer 1

<div class="navigation" align="center"> 
<ul><li><a href="link2"><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></a></li> 
<li><a href="link2"><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></a></li> 
<li><a href="link2"><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></a></li> 
<li><a href="link2"><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></a></li> 
<li><a href="link2"><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></a><li> 
</ul> 
</div> 
<style> 
li 
{ 
display:inline-block; 
} 
</style> 

Answer 2

Дайте каждому из HREF класс т.е. .home_bg и т.д. Тогда в CSS добавить

.home_bg { 
background-image: url(/example/example.png) 
} 

сделать это для каждого изображения, если они различны. Затем в html удалите теги img