在CSS样式表中添加一个图片链接

Question

我希望在CSS样式表中添加一个链接到图片，这样当单击图片时它就会导航到链接。

图片本身的代码是：

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

如何添加代码以允许导航到超链接？例如：如果我想要导航到http://home.com

- Marc L

---

请检查我的编辑。 - Andrea Turri

Answer 1

你不能这样做...

通过 CSS，你在 background-image 上放置的 URL 只是用于图片。

通过 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;
}

如果您不关心搜索引擎优化，那么选择另一个答案更好。

- Andrea Turri

---

谢谢，我已经按照建议进行了更改，但是文本出现了，而超链接似乎没有与图像链接起来。更改后的网站位于http://www.towels.co.za，不是我的网站，而是我正在为朋友修复并试图找到他的代码的一个网站。 - Marc L

好的，找到了错误-他没有在头部包含样式表...我考虑过SEO问题，但由于我在处理CSS方面遇到了困难（主要是因为我上次编写HTML代码已经接近十年了...），所以我把它放在了后台，只想让网站按需工作。 - Marc L

Answer 2

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

仅基于您的样式，您将拥有：

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

- Schleis

Answer 3

你可以这样做：

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

在HTML中

- Saryk

Answer 4

我偶然发现了这篇老文章，思考着同样的问题。 我对于同样的问题的临时解决方法是将我的标题文本制成链接。 然后，我用CSS更改了颜色并删除了文本装饰。 现在要使整个标题图片成为一个链接，我扩展了锚标记的填充，直到它接近标题图像的边缘...... 这符合我的要求，我想分享一下。

- Lars