8

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

图像本身的代码是：

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

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

4

4 回答 4

17

你不能这样做...

通过 cssURL你放的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，请选择其他答案。

于 2013-02-06T13:42:34.040 回答
2

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

仅基于您的风格，您将拥有：

<a href="home.com" id="logo"></a>
于 2013-02-06T13:42:59.563 回答
1

你可以做类似的事情

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

在 HTML 中

于 2016-06-15T13:48:44.837 回答
0

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

于 2015-12-06T00:46:21.957 回答