Question

两天前，我自发地给自己买了一个域名。前一天，我几乎不知道域名究竟是什么。从那以后，我第一次尝试自学HTML。基本上我想说的是，我很新 - 而且我的解释可能会很差。

我刚成功制作了一个＆＃39;图像按钮＆＃39;，sorta。它是我制作类似按钮的图像然后在我的网站上用作导航的地方（就像常规链接一样）。我的问题是链接＆＃39; border＆＃39;本身比图像大，所以你可以在图像本身外按一英寸它就可以了。如何制作隐形链接＆＃39; border＆＃39;与按钮大小相同吗？

这是我的网站： http://www.djeveln.com

在测试页面（djeveln.com/test）上我是测试的地方。我正在谈论的按钮，以防您无法理解我的解释。

这是我的HTML：

<a class="ButtonLink" href="http://www.djeveln.com" title="Home"> 
<img src="/images/button.png" class="TestButton"></a>

这是我用于图像位置和大小的CSS：

img.TestButton { /* Dette linker til selve størrelsen av knappen (bildet)*/ 
    position: absolute; 
    width: 100px; 
    height: 75px; 
    top: 400px;
    right: 250px; 
}

希望你能帮助我！：P

Answer 1

您的按钮图像包含一个大的透明区域（实际按钮或多或少位于中间），这就是导致“边框”的原因。

虽然有CSS解决方法，但我建议您只需在Photoshop（或任何其他图像编辑器）中打开图像，然后裁剪透明区域。使图像与按钮的大小完全相同。

还有一个提示，可以让您的学习更轻松：使用Chrome开发者工具或Firebug等调试工具（如果您使用的是Firefox）。有了这些，您可以检查HTML上的任何元素（右键单击它并选择“inspect”），检查应用它们的CSS（并且还可以动态修改它以进行测试）等等。这就是我在你的图像上发现透明边框的方式。

Answer 2

快速浏览一下，看起来你只是让图像太大了。按钮外部有很多透明图像，是点击目标的一部分。你是怎么做按钮的？

例如，如果您是在Photoshop中制作的，则应将图像裁剪为紧靠按钮的边框。

你可以在CSS中做到这一点，但你要为自己做工作 - 我会修改源图像。

图像链接的问题

2 个答案: