Question

关于如何使用以下HTML将图片（背景图片）添加到页面中，我有点迷失：

<div style="background-color: #fff; background: #fff url(/affiliate/uploads/images/subs_bg_4e1a7912cf9a79.22853644.jpg) no-repeat right top" class="bigshadow" id="wrapper"></div>

我需要在背景图片中添加超链接。

Answer 1

$（“＃wrapper”）。click（function（）{here goes redirect}）或者你只需要背景图片：??

Answer 2

$('#wrapper').live('click',function(){
   location.href = "http://www.yoursite.com";
});

我使用live()，因为您的问题暗示div已动态添加到页面中。

如果你真的想插入超链接（一个元素），你可以这样做：

$('#wrapper').append($('<a/>',{'html':'<br/>','href':'http://www.yoursite.com'}).css({'display':'block','height':'100%','width':'100%'}));

你可能希望在课堂上运行所有这些而不是id，所以它适用于多个元素

Answer 3

在你的div中添加一个链接display:block，如下所示:(这个技巧甚至可以在ie6,7,8中使用）

HTML：

<div style="background-color: #fff; background: #fff url(img.jpg) no-repeat right top" class="bigshadow" id="wrapper">
    <a title="click here" href="http://mysite.com"><span>MySite.com</span></a>
</div>

的CSS：

#wrapper a {
    display: block;
    height: 101px;
    width: 100%;
}

jsFiddle example

Answer 4

我不明白为什么成为带有背景图片的<div> ...这只是意味着你会在痛苦的城市试图强迫浏览器因为不当使用标记而做某事。

从您的问题中不清楚您是否可以控制<div>的来源。

如果你做可以控制创建<div>的内容，我建议将其更改为<img src="pathtotheimage.jpg"/>并将其包装在一个锚点（<a>）中标记：

如果您对<div>的创建无控制，那么我建议从中提取图像URL并使用正确的语义标记。

在任何一种情况下，这都是你应该瞄准的标记：

<a href="#" id="wrapper" class="bigshadow">
     <img src="/affiliate/uploads/images/subs_bg_4e1a7912cf9a79.22853644.jpg" />
</a>

这样做，你需要没有额外的CSS 来实现你想要的 - 一个可点击的图像。

如果您需要从响应中提取图像URL，请执行以下操作：

function extractImageUrl(html) {
    return $(html).css('background-image').replace(/url\(\"(.*?)\"\)/, "$1");
}

添加图像的超链接（背景图像）

4 个答案: