如何向背景图像添加超链接？
[英]How do I add a hyperlink to a background image?
问题描述
我想为这个背景图片添加一个超链接。 我应该在样式表中创建一个新类吗？ （当我试图调用新类时，图像消失了）。
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
}
编辑：现在顶部和底部有空格（由新的div类创建？）
5 个解决方案
解决方案1
4 2010-09-23 13:07:04
您在body标签上使用background-image 。 为其分配超链接是不可能的。
另外，什么阻止你在img标签中使用它？ 这似乎是一个语义上有效的事情：
<a href="#"><img src="http://thehypebr.com/wp-content/uploads/2010/09/boundless-sem-branco-2.jpg" alt="Image" /></a>
但是，如果你必须将它用作背景图像，那么创建一个额外的类就是要走的路。
解决方案2
3 已采纳 2010-09-23 13:09:50
你可以在页面上的所有内容后面放置一个div，给它一个背景图像，然后为该div添加一个onclick处理程序。 但是你不能超链接背景图像。
你必须做的事情如下：
<body>
<div id='background' onclick='window.location.href="mynewurl"'>
<!-- Rest of page goes here -->
</div>
</body>
另外，添加cursor: pointer背景div的css的cursor: pointer ，这样人们就知道它是一个链接。
解决方案3
1 2010-09-23 14:04:03
好的，我不能告诉你这是否是一个有效的解决方案，因为我必须看到你真正想要的是一个链接。 例如，如果您想在背景图像中链接到奶油“无边界”框，我确实有一个解决方法。 将浏览器设置为正确将是一件痛苦的事，但这是可行的。
- 明确gif与奶油盒的尺寸相同
- 将这些图像放在这样的
<a href="#" class="bkg-link1"><img src="blank.gif" alt="Link Location" /></a> - 使用CSS将标记作为块元素并将其放在背景图像中的奶油盒上
我当然会清理我的代码，这是一团糟，但我相信你可以搞清楚。 只需确保具有可访问性的描述性alt标记。
这不是最好的解决方案，那就是将“无限”框从背景图像中取出并放置它们而不是空白的GIF，但是如果你出于某种原因必须这样做，这个选项就可以了。
解决方案4
0 2010-09-23 13:07:22
你将不得不改变你的html代码来做到这一点。 您需要使用标记环绕图像，但显然不能对<body>标记执行此操作。
**编辑**既然已经指出我的第一个答案是无效的HTML（谢谢，抱歉），你可以使用这样的jquery方法：
$(document).ready(function(){
$("body").click(function(){
window.location='http://www.yoururl.com';
});
});
解决方案5
0 2017-08-29 21:16:25
设置onClick方法的问题是，您删除了浏览器窗口左下角的锚点提示，以及可能与链接相关联的任何SEO。
您只需使用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>
在这种情况下，background-div上的相对定位将使链接仅包含该div，并且通过向链接添加伪元素，您可以自由地向链接添加文本（如果需要），同时扩展单击半径到整个背景div。
如何向位于数据阵列内的图像添加超链接？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.