css - 使用 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>

我希望主页文本显示在图像上方，例如。在没有图像的情况下 float 实际上失去了 onmouseof 和 onmouseover 位置，这可能吗？

Answer 1

我会将图像源作为该标签的背景，并将其放置在适当的位置，以便为文本“ float ”在上方节省空间

<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');
}