在 css 样式表中添加指向图像的链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14730484/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add a link to an image in a css style sheet
提问by Marc L
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.
我希望在 acss 样式表中添加指向图像的链接，以便在按下图像时导航到该链接。
The code for the image itself is:
图像本身的代码是：
#logo{
background-image: url(images/logo.png);
width: 981px;
height: 180px;
margin-left: auto;
margin-right: auto;
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
要添加什么代码以允许它导航到超链接？例如：如果我想让它导航到http://home.com
回答by Andrea Turri
You can not do that...
你不能这样做...
via css the URLyou put on the background-imageis just for the image.
通过 cssURL你放的background-image只是为了图像。
Via HTMLyou have to add the hreffor your hyperlink in this way:
通过HTML你必须以href这种方式为你的超链接添加：
<a href="http://home.com" id="logo">Your logo</a>
With text-indentand some other cssyou can adjust your a element to show just the image and clicking on it you will go to your link.
使用text-indent和其他一些css您可以调整您的 a 元素以仅显示图像并单击它您将转到您的链接。
EDIT:
编辑：
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>
This block of HTMLis SEO friendlybecause you have some text inside your link!
这块HTML是SEO 友好的，因为您的链接中有一些文字！
How to style it with css:
如何使用 css 设置样式：
#logo {
background-image: url(images/logo.png);
display: block;
margin: 0 auto;
text-indent: -9999px;
width: 981px;
height: 180px;
}
Then if you don't care about SEOgood to choose the other answer.
然后，如果您不关心SEO好选择其他答案。
回答by Saryk
You could do something like
你可以做类似的事情
<a href="http://home.com"><img src="images/logo.png" alt="" id="logo"></a>
in HTML
在 HTML 中
回答by Schleis
You don't add links to style sheets. They are for describing the style of the page. You would change your mark-up or add JavaScript to navigate when the image is clicked.
您不添加指向样式表的链接。它们用于描述页面的样式。您可以更改标记或添加 JavaScript 以在单击图像时进行导航。
Based only on your style you would have:
仅根据您的风格，您将拥有：
<a href="home.com" id="logo"></a>
回答by Lars
I stumbled upon this old listing pondering this same question. My band-aid for this same question was to make my header text into a link. I then changed the color and removed text decoration with CSS. Now to make the entire header picture a link, I expanded the padding of the anchor tag until it reached close to the edge of the header image.... This worked to my satisfaction, and I figured i would share.
我偶然发现了这个旧列表，正在思考同样的问题。我对同一问题的创可贴是将我的标题文本变成一个链接。然后我更改了颜色并使用 CSS 删除了文本装饰。现在为了让整个标题图片成为一个链接，我扩大了锚标签的填充，直到它接近标题图片的边缘......这让我很满意，我想我会分享。
