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

问题描述

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

I am looking to add a link to an image in a CSS style sheet so it will navigate 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，您放在 background-image 上的 URL 仅用于图像.

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

通过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 和其他一些 css，您可以调整 a 元素以仅显示图像，然后单击它您将转到您的链接.

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.

我再次向您展示并解释为什么我的解决方案更好:

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 设置样式:

How to style it with 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屋！