1

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

我刚刚成功制作了一个“图像按钮”，有点像。这是我制作按钮状图像的地方，然后将其用作我网站上的导航（就像常规链接一样）。我的问题是链接“边框”本身比图像大，所以你可以在图像本身之外按一英寸，它就会起作用。如何使不可见的链接“边框”与按钮的大小相同？

这是我的网站： 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

4

2 回答 2

4

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

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

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

于 2012-06-17T21:18:45.657 回答
0

快速浏览一下，您似乎只是将图像制作得太大了。按钮外部有很多透明图像，它们是点击目标的一部分。你是怎么做按钮的？

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

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

于 2012-06-17T21:21:36.070 回答