Question

我想为此背景图片添加超链接。我应该在样式表中创建一个新类吗？（当我试图调用新类时，图像消失了。）

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类创建？）

Answer 1

您在background-image标记上使用了body。为它分配超链接是不可能的。

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

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

但是，如果你必须将它用作背景图像，那么创建一个额外的类是可行的方法。

Answer 2

你可以在页面上的所有内容后面放置一个div，给它一个背景图像，然后为该div添加一个onclick处理程序。但是你不能超链接背景图像。

你必须做类似的事情：

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

另外，将cursor: pointer添加到背景div的css中，以便人们知道它是一个链接。

Answer 3

好的，我不能告诉你这是否是一个有效的解决方案，因为我必须看到你真正希望成为一个链接。例如，如果您想在背景图像中链接到奶油“无边界”框，我确实有一个解决方法。将浏览器设置为正确将是一件痛苦的事，但这是可行的。

明确gif与奶油盒相同的尺寸
将这些图片放入<a href="#" class="bkg-link1"><img src="blank.gif" alt="Link Location" /></a>
使用CSS将标签设为块元素，并将其放在背景图像中的奶油盒上

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

这不是最好的解决方案，那就是从背景图像中取出“无边框”并放置它们而不是空白的GIF，但是如果你出于某种原因需要这样做，这个选项会工作的。

Answer 4

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

**编辑**既然已经指出我的第一个答案是无效的HTML（谢谢，抱歉），你可以使用这样的jquery方法：

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

Answer 5

设置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。

如何向背景图像添加超链接？

5 个答案: