仅在背景图像的一部分上放置一个 html 链接，typo3 网站。答案

【问题标题】：Place a html link on part of a background image only, typo3 site.仅在背景图像的一部分上放置一个 html 链接，typo3 网站。
【发布时间】：2011-12-27 09:50:31
【问题描述】：

我接管了一个用表格编码的网站（看起来像 DW），一半在typo3 CMS 中编码，一半是硬编码。

无论如何，我的老板要求我让徽标可点击，以便从徽标显示的每个页面链接到主页。问题是徽标是构成页面三分之一的整个图像的一部分，因此链接整个图像是不可能的。

我不想重组和分割图像以将徽标与 BG 图像分开，那么是否可以仅在徽标上放置一个链接部分？

我想到了一个空的 div，它位于 logo 部分上，只有一个链接标签，它 100% 填充它，这可能吗？它会工作吗？该网站在这里http://overbeckanalytics.com/typo3/menu-top/about-us.html...您可以保存 BG 图像并查看其不仅仅是徽标...

请告诉我如何制作一个仅位于该图像上的徽标上的链接。

【问题讨论】：

好吧，我想通了！我刚刚将内联 CSS 添加到锚标记并将链接定位在徽标上。有点解决方法，但期望的效果就在那里，所以我想我现在很高兴:)

标签： html css image hyperlink background

【解决方案1】：

<body> 元素上是否有背景图片？如果是这样，这应该工作：

<body>
    <a href="http://example.com/" id="logo_link">Example Company</a>
</body>

使用这个 CSS：

a#logo_link {
    position: absolute;
    display: block;
    visibility: hidden;
    left: 42px;
    top: 42px;
    width: 42px;
    height: 42px;
}

注意<a>标签需要直接在<body>标签内，否则位置可能不正确。它可以在正文标签中的任何位置，但在开头或结尾。

我还在链接中放置了公司名称，因为没有任何文字的链接是个坏主意。为禁用用户设计的浏览器无法理解空白链接，并且可能会触发搜索引擎中的垃圾邮件算法。 visibility 属性将使链接不可见，即使它仍然存在并且可以单击。

【讨论】：

【解决方案2】：

我提供了一个示例答案。如果您被允许加载 JQuery 库并且可以将锚点放置在页面上的某个位置。

http://jsfiddle.net/XFvQD/

【讨论】：

我只使用 jquery 来允许锚标记位于表内。实际上，如果您可以为其应用 ID/Class，它应该在嵌套表中。

【解决方案3】：

你会寻找这样的东西：

<html>
<body>
<img src="http://listphobia.com/wp-content/uploads/honda-v4-concept1.jpg"/>
<a href="http://www.google.com" style="border: 1px solid red; position: absolute; top: 15px; left: 50px; width: 30px; height: 30px;"></a>
</body>
</html>

【讨论】：