在css样式表中添加图像的链接 [英] Add a link to an image in a css style sheet

问题描述

我想在acss样式表中添加一个图像的链接，所以它会在图像被按下时指向链接。

I am looking to add a link to an image in acss style sheet so it will nagvigate to the link when the image is pressed.

图片本身的代码是：

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

要添加的代码导航到超链接是什么？例如：如果我想导航到 http://home.com

What is the code to add to allow it to navigate to a hyperlink? For example: If I wanted it to navigate to http://home.com

推荐答案

你不能这样做...

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

via css the URL you put on the background-image is just for the image.

Via HTML 您必须以此方式为您的超链接添加 href ：

Via HTML you have to add the href for your hyperlink in this way:

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

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

With text-indent and some other css you can adjust your a element to show just the image and clicking on it you will go to your link.

编辑：

因为我相信你是懒惰的搜索什么文本缩进做和尝试我的代码图片上的文字我在这里再次向您展示并解释为什么我的解决方案更好：

Because I'm sure you're lazy to search what text-indent do and trying my code you had text on your image I'm here again to show you and explain why my solution is much better:

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

HTML SEO友好，因为您的链接中有一些文本。

This block of HTML is SEO friendly because you have some text inside your link!

如何使用css风格：

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

那么如果你不在乎 SEO 好选择其他答案。

Then if you don't care about SEO good to choose the other answer.

这篇关于在css样式表中添加图像的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！