logo标签列表

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

htmlcss
3

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


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个回答
5
您在标签上使用了属性，但无法为其分配超链接。
此外，您可以考虑在标签中使用该属性，这看起来是一种语义上有效的做法：
<a href="#"><img src="http://thehypebr.com/wp-content/uploads/2010/09/boundless-sem-branco-2.jpg" alt="Image" /></a>

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

4
您可以在页面上放置一个div，将其置于所有元素的后面，并为该div添加背景图像，然后添加一个onclick处理程序。但是您无法将背景图像设置为超链接。
您需要执行以下操作：
<body>
    <div id='background' onclick='window.location.href="mynewurl"'>
        <!-- Rest of page goes here -->
    </div>
</body>

此外，将cursor: pointer添加到背景div的css中，以便人们知道它是一个链接。
非常感谢！但现在页面顶部、底部和菜单栏上都有白色空间。http://thehypebr.com/ - pmchrislee
不要使用"onclick="window.location.href="http://boundlessny.com/clothing""，而应该使用"onclick='window.location.href="http://boundlessny.com/clothing'"，即将单引号嵌套在双引号内。 - Skilldrick
1

好的，我无法告诉你这是否是一个有效的解决方案，因为我需要看看你实际想要成为链接的内容。例如，如果你想要将链接指向背景图像中的“Boundless”盒子，我有一个解决方法。虽然在不同浏览器上正确显示可能会很麻烦，但是它是可行的。

  1. 制作与你的奶油盒子相同大小的透明gif图片
  2. 将这些图像放入类似于以下代码的容器中：<a href="#" class="bkg-link1"><img src="blank.gif" alt="Link Location" /></a>
  3. 使用CSS将a标签设置为块级元素，并将其放置在背景图像中的奶油盒子上方

当然，我会清理我的代码，因为它很混乱，但我相信你可以弄清楚。只需确保具有描述性的alt标签以提高可访问性。

这不是最好的解决方案，最好的解决方案是将“无限”的盒子从背景图像中取出，并将它们放置在空白gif的位置，但如果你必须出于某种原因这样做，这个选项也可以工作。

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

在这种情况下，背景div的相对定位将使链接仅限于该div，并通过向链接添加伪元素，您可以自由地向链接添加文本（如果必要），同时将点击半径扩展到整个背景div。
0
你需要稍微修改一下你的HTML代码才能实现这个功能。你需要用一个标签来包围图片，但显然你不能对标签这样做。
**编辑** 由于有人指出我的第一个答案是无效的HTML（谢谢并抱歉），你可以使用类似这样的jQuery方法：
$(document).ready(function(){
    $("body").click(function(){
        window.location='http://www.yoururl.com';
    });
});
1
这是无效的HTML。您不能在锚点中使用div。 - Yi Jiang
1
就像Yi所说的那样，你不能用锚标签包裹块级元素。唯一的方法是向div添加点击处理程序，就像我的答案中所示。 - Skilldrick
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接