Html 如何将超链接添加到背景图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3778611/
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
How do I add a hyperlink to a background image?
提问by pmchrislee
I'd like to add a hyperlink to this background image. Should I create a new class within the stylesheet? (When I attempted to call the new class, the image disappeared).
我想为这个背景图片添加一个超链接。我应该在样式表中创建一个新类吗？（当我尝试调用新类时，图像消失了）。
body{
background-image:url('http://thehypebr.com/wp-content/uploads/2010/09/boundless-sem-branco-2.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
line-height:20px; font-size:14px;
font-family:"Trebuchet MS";
margin:0
}
EDIT: Now there's whitespace on the top and bottom (created by the new div class?)
编辑：现在顶部和底部有空格（由新的 div 类创建？）
回答by Russell Dias
You're using a background-imageon the bodytag. Assigning a hyperlink to it is impossible.
你在标签background-image上使用 a body。为其分配超链接是不可能的。
Also, whats stopping you from using it in an imgtag? This seems like a semantically valid thing to do:
另外，是什么阻止您在img标签中使用它？这似乎是一个语义上有效的事情：
<a href="#"><img src="http://thehypebr.com/wp-content/uploads/2010/09/boundless-sem-branco-2.jpg" alt="Image" /></a>
But, if you must use it as a background image, than creating an additional class is the way to go.
但是，如果您必须将它用作背景图像，那么创建一个额外的类是可行的方法。
回答by Skilldrick
You can place a div behind everything on the page, give it a background image, and then add an onclick handler to that div. But you can't hyperlink a background image.
您可以在页面上的所有内容后面放置一个 div，为其提供背景图像，然后向该 div 添加一个 onclick 处理程序。但是您不能超链接背景图像。
You'd have to do something like:
您必须执行以下操作：
<body>
<div id='background' onclick='window.location.href="mynewurl"'>
<!-- Rest of page goes here -->
</div>
</body>
Also, add cursor: pointerto the css for the background div so people know it's a link.
此外，添加cursor: pointer到背景 div 的 css 以便人们知道它是一个链接。
回答by Ammi J Embry
OK, I can't tell you if this would be a valid solution, because I would have to see what you actually wanted to be a link. If for example you wanted to make a link to the cream "Boundless" boxes in your background image I do have a work around. It will be a pain to get it correct cross browser, but it's doable.
好的，我不能告诉你这是否是一个有效的解决方案，因为我必须看看你实际上想要成为一个链接。例如，如果你想在你的背景图片中制作一个链接到奶油色“无限”框，我有一个解决方法。获得正确的跨浏览器会很痛苦，但它是可行的。
- Make clear gif's the same size as your cream boxes
- Put those images in something like this
<a href="#" class="bkg-link1"><img src="blank.gif" alt="Link Location" /></a> - Use CSS to make the a tag a block element and place it over the cream boxes in the background image
- 使清晰的 gif 与您的奶油盒大小相同
- 把这些图像放在这样的地方
<a href="#" class="bkg-link1"><img src="blank.gif" alt="Link Location" /></a> - 使用 CSS 使 a 标签成为块元素并将其放置在背景图像中的奶油盒上
I would of course clean up my code, it's a mess, but I am sure you can figure that out. Just make sure to have descriptive alt tags for accessibility.
我当然会清理我的代码，这是一团糟，但我相信你能弄清楚。只需确保具有描述性的 alt 标签即可访问。
This isn't the best solution, that would be to take the "boundless" boxes out of the background image and place them instead of the blank gifs, but if you HAVE to do it for one reason or another, this option will work.
这不是最好的解决方案，那就是从背景图像中取出“无限”框并放置它们而不是空白 gif，但是如果您出于某种原因必须这样做，则此选项将起作用。
回答by Lucas
The issue with setting up an onClick method, is that you remove the anchor hint at the bottom left of the browser window, as well as any SEO that might be associated with the link.
设置 onClick 方法的问题在于您删除了浏览器窗口左下角的锚点提示，以及可能与链接相关联的任何 SEO。
You can accomplish this with just HTML/CSS:
您可以仅使用 HTML/CSS 来完成此操作：
<style>
.background-div {
background-image:url("/path/to/image.jpg");
position:relative;
}
.href:after {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
content:"";
}
</style>
<body>
<div class="background-div">
<a href="/a/url" class="href"></a>
</div>
</body>
In this case, the relative positioning on background-div will keep the link contained to only that div, and by adding a pseudo element to the link, you have the freedom to still add text to the link (if necessary), while expanding the click radius to the entire background div.
在这种情况下，background-div 上的相对定位将使链接仅包含在该 div 中，并且通过向链接添加伪元素，您仍然可以自由地向链接添加文本（如有必要），同时扩展单击半径到整个背景 div。
回答by TheGeekYouNeed
You're going to have to change your html code a bit to do that. You need to surround the image with a tag, but you can't do that to the <body>tag, obviously.
您将不得不稍微更改您的 html 代码才能做到这一点。你需要用标签包围图像，但<body>显然你不能对标签这样做。
** EDIT ** Since it's been pointed out my first answer is invalid HTML (thanks, and sorry), you can use a jquery approach like this:
** 编辑 ** 由于有人指出我的第一个答案是无效的 HTML（谢谢，抱歉），您可以使用这样的 jquery 方法：
$(document).ready(function(){
$("body").click(function(){
window.location='http://www.yoururl.com';
});
});
