Позиционирование текста для отображения поверх изображения с использованием CSS

Question

У меня есть следующий сценарий

<TD><a href="index-1.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image20','','images/m21.jpg',1)"><img src="images/m2.jpg" name="Image20" width="103" height="136" border="0">Home</a></TD>

Я хочу, чтобы над изображением отображался домашний текст, например. плавающее без изображения, фактически теряющее позиции onmouseof и onmouseover, это возможно?

Answer 1

Я бы сделал источник изображения фоном этого тега и поместил бы его правильно, чтобы освободить место для текста, чтобы "плавать" выше

<td><a href="index-1.html">Home</a></td>

CSS

td a /* probably better to use an ID here #myAnchor */
{        
    vertical-align: top;
    height: 156px; /* padding 20px to save room for "Home" text */
    width: 103px;
    display: inline-block;
    background: url('images/m20.jpg') no-repeat 0 20px;
    text-align: center;
}

td a:hover /* probably better to use an ID here #myAnchor */
{
    background: url('images/m21.jpg');
}

Answer 2

<style>
#thisNavElement{
width:103px;
height:136px;
display:block;
text-align:center;
vertical-align:center;
background:url(images/m2.jpg);
}
#thisNavElement:hover{
background:url(images/m21.jpg);
}
</style>

<a id='thisNavElement'>Home</a>

Answer 3

<TD><a href="index-1.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image20','','images/m21.jpg',1)"><img src="images/m2.jpg" name="Image20" width="103" height="136" border="0"><div id='text'>Home</span></a></TD>

CSS:

#id {
position: relative;
top: -20px;
z-index: 2;
}

Answer 4

В качестве альтернативного решения вы можете просто поместить свой текст в тег span, а затем использовать css, чтобы расположить его любым удобным вам способом.

<TD>
   <a href="index-1.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image20','','images/m21.jpg',1)">
      <img src="images/m2.jpg" name="Image20" width="103" height="136" border="0" />
      <span class="someclassname">Home</span>
   </a>
</TD>

Answer 5

В вашем CSS вы можете сказать

#my_anchor {
  background: url(images/m21.jpg);
}

, а затем просто измените фон в JavaScript / jQuery