在 CSS 样式表中添加指向图像的链接答案

【问题标题】：Add a link to an image in a css style sheet在 CSS 样式表中添加指向图像的链接
【发布时间】：2013-02-06 13:38:56
【问题描述】：

我希望在 CSS 样式表中添加指向图像的链接，以便在按下图像时导航到该链接。

图片本身的代码是：

 #logo{
    background-image: url(images/logo.png);
    width: 981px;
    height: 180px;
    margin-left: auto;
    margin-right: auto;

要添加什么代码以使其导航到超链接？例如：如果我想让它导航到http://home.com

【问题讨论】：

【解决方案1】：

你不能那样做……

通过 css 你把URL 放在background-image 上只是为了图像。

通过HTML，您必须以这种方式为您的超链接添加href：

<a href="http://home.com" id="logo">Your logo</a>

使用text-indent 和其他一些css，您可以调整您的a 元素以仅显示图像并单击它，您将转到您的链接。

编辑：

我再次在这里向您展示并解释为什么我的解决方案要好得多：

<a href="http://home.com" id="logo">Your logo name</a>

这块HTML 是SEO 友好，因为您的链接中有一些文字！

如何用 css 设置样式：

#logo {
  background-image: url(images/logo.png);
  display: block;
  margin: 0 auto;
  text-indent: -9999px;
  width: 981px;
  height: 180px;
}

那么，如果您不关心 SEO，最好选择其他答案。

【讨论】：

谢谢，我已经进行了建议的更改，但是出现了文本，并且超链接似乎没有链接到图像。有更改的站点位于towels.co.za，不是我的站点，但我正在尝试为朋友修复并试图找到绕过他的代码的方法
好的，发现错误-他没有在标题中包含样式表...我考虑过 SEO 问题，但是因为我在 CSS 上苦苦挣扎（主要是因为我上次写HTML 代码接近十年前...）我把它放在后台只是想让网站根据需要运行

【解决方案2】：

您不向样式表添加链接。它们用于描述页面的样式。单击图像时，您可以更改标记或添加 JavaScript 以进行导航。

仅基于您的风格：

<a href="home.com" id="logo"></a>

【讨论】：

【解决方案3】：

你可以这样做

<a href="http://home.com"><img src="images/logo.png" alt="" id="logo"></a>

在 HTML 中

【讨论】：

【解决方案4】：

我偶然发现了这个旧列表，正在思考同样的问题。对于同样的问题，我的创可贴是将我的标题文本变成一个链接。然后我更改了颜色并使用 CSS 删除了文本装饰。现在为了使整个标题图片成为一个链接，我扩展了锚标记的填充，直到它接近标题图片的边缘......这让我很满意，我想我会分享。

【讨论】：