Question

我有以下代码用于背景图片：

 <table cellpadding="0" cellspacing="0" border="0">
 <tr>
 <td style="background-image: url(SOMEIMAGE.png); 
  width: 305px; height: 23px;
   text-align: center; 
  vertical-align: middle;
     border: 0px #FFFFFF solid">
    <a href="SOMELINK.COM" style="color: white; text-decoration: none">THIS IS A TEST   LINK</a>
    </td></tr></table>

图像中定义的文本是可点击的，但背景图像本身不是。是否有可能使背景图像和文本可以点击进入另一个链接？

Answer 1

您可以将锚点设为块元素

<a href="SOMELINK.COM" style="display:block; height: 100%; color: white; text-decoration: none">

或您可以将背景设为锚点的背景而不是td，并将大小应用于它。

<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td style=" text-align: center; vertical-align: middle;">
            <a href="SOMELINK.COM" style="color: white; text-decoration: none; background-image: url(SOMEIMAGE.png); 
                width: 305px; height: 23px;
                display:block;
                border: 0px #FFFFFF solid">THIS IS A TEST LINK</a>
        </td>
    </tr>
</table>

Answer 2

将链接转换为块级元素：

a {
    display:block;
    height:100%;
}

<强> jsFiddle example

这样它将占据其父级的整个宽度和高度。

Answer 3

试试这个

<table cellpadding="0" cellspacing="0" border="0">
 <tr>
 <td style="width: 305px; height: 23px;text-align: center; vertical-align: middle;
     border: 0px #FFFFFF solid">

    <a href="SOMELINK.COM" style="background-image:url(SOMEIMAGE.png);display:block;color: white;text-decoration: none">THIS IS A TEST   LINK</a>

</td>
  </tr>
 </table>

加上读这个 http://www.echoecho.com/htmllinks06.htm

可点击图片HTML

3 个答案: