可点击图片HTML

我有一个背景图像以下代码：可点击图片HTML

<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>

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

来源

2014-03-25 user3461318

...使它成为锚的背景？ – Popnoodles

你可以做锚块元素

<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>

来源

2014-03-25 19:15:57 Popnoodles

这似乎很好！唯一的问题是文字出现在图像的中心和顶部......我如何居中并使图像居中？ – user3461318

你可以使用那个线条高度 –

谢谢你们俩......现在它工作的很好。 – user3461318

试试这个

<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

来源

2014-03-25 19:15:25

你可以在给出的代码的上下文中做出这个答案吗？ – Popnoodles

肯定给我一点时间:) –

把你的链接到一个块级元素：

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

jsFiddle example

这样，它会占用其母公司的整个宽度和高度。

来源

2014-03-25 19:16:13 j08691

可点击图片HTML

回答

相关问题