如何将超链接添加到背景图片？

我想添加一个超链接到这个背景图片。我应该在样式表中创建一个新类吗？（当我试图给新班级打电话时，图像消失了）。如何将超链接添加到背景图片？

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类创建）现在有一个在顶部和底部的空白

来源

2010-09-23 pmchrislee

你可以把一切的背后一个div在页面上给它一个背景图片，然后在该div上添加一个onclick处理程序。但是你不能超链接背景图片。

你不得不做这样的事情：

<body> 
    <div id='background' onclick='window.location.href="mynewurl"'> 
     <!-- Rest of page goes here --> 
    </div> 
</body>

此外，添加cursor: pointer到CSS的背景div中的人都知道它是一个链接。

来源

2010-09-23 13:09:50 Skilldrick

非常感谢！但是现在顶部底部和页面菜单本身就有空白区域。 http://thehypebr.com/ – pmchrislee 2010-09-23 13:23:13

不要做''onclick =“window.location.href =”http://boundlessny.com/clothing“”' - 做'“onclick ='window.location.href = “http://boundlessny.com/clothing'”' - 即在双引号内嵌套单引号。 – Skilldrick 2010-09-23 13:33:05

加'宽度：100％;' – Skilldrick 2010-09-23 13:33:56

你在body标签使用background-image。指定一个超链接是不可能的。

另外，什么阻止你在img标记中使用它？这似乎是一个语义上有效的事：

<a href="#"><img src="http://thehypebr.com/wp-content/uploads/2010/09/boundless-sem-branco-2.jpg" alt="Image" /></a>

但是，如果你必须使用它作为背景图像，比创建一个额外的类是要走的路。

来源

2010-09-23 13:07:04

你将不得不改变你的html代码来做到这一点。您需要使用标签环绕图像，但显然，您不能对<body>标签执行此操作。

**编辑**，因为它指出了我的第一个答案是无效的HTML（感谢和抱歉），你可以使用这样一个jQuery的方法：

$(document).ready(function(){ 
    $("body").click(function(){ 
     window.location='http://www.yoururl.com'; 
    }); 
});

来源

2010-09-23 13:07:22 TheGeekYouNeed

这是无效的HTML。你不能在锚中嵌入'div' – 2010-09-23 13:08:26

就像Yi说的那样，你不能用块标签包装块级元素。这样做的唯一方法是添加一个点击处理程序的div，如我的答案。 – Skilldrick 2010-09-23 13:11:40

好吧，我不能告诉你这是否是一个有效的解决方案，因为我不得不看看你真正想成为一个链接。例如，如果你想在你的背景图像中创建一个链接到“无边框”的框，我确实有一个解决办法。让浏览器正确无误是一件痛苦的事情，但它是可行的。

明确gif文件大小为你的面霜盒
把这些图片在这样的<a href="#" class="bkg-link1"><img src="blank.gif" alt="Link Location" /></a>
使用CSS使标签块元素，并将其放置在背景奶油盒相同图片

我当然会清理我的代码，这是一团糟，但我相信你可以弄清楚。只要确保具有可访问性的描述性alt标签即可。

这不是最好的解决方案，那就是将背景图像中的“无边界”框放在背景图像上，而不是空白的gif，但如果您因为某种原因需要这样做，选项将起作用。

来源

2010-09-23 14:04:03 Nicknameless

设置onClick方法的问题在于您删除浏览器窗口左下角的锚点提示以及可能与链接关联的任何搜索引擎优化。

你可以只用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="https://stackoverflow.com/a/url" class="href"></a> 
    </div> 
</body>

在这种情况下，在背景格的相对位置将保持包含仅该div的链接，并通过添加伪元素到链接，您可以自由地向链接添加文本（如有必要），同时将点击半径扩展到整个背景div。

来源

2017-08-29 21:16:25 Lucas

如何将超链接添加到背景图片？

回答

相关问题