在css样式表中添加指向图像的链接

Question

我希望在acss样式表中添加一个图像的链接，这样当按下图像时它会链接到链接。

图像本身的代码是：

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

要添加哪些代码以允许其导航到超链接？例如：如果我希望它导航到http://home.com

Answer 1

你做不到......

通过css，您URL上的background-image仅用于图片。

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

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

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

---

编辑：

因为我确定你懒得搜索文字缩进并尝试我的代码，你的图像上有文字我再次在这里向你展示并解释为什么我的解决方案要好得多：

<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 那么选择其他答案是好的。

Answer 2

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

仅根据您的风格，您将拥有：

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

Answer 3

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

Answer 4

您可以执行类似

的操作

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

HTML中的