Question

可能重复：
Get URL from background-image Property

我正在使用Cycle Plugin，我想创建一个寻呼机/缩略图。

HTML

<div id="slide">
  <div class="panel" id="product">

  </div>
</div>

我的影像位于div的背景上。不在div本身里面

JS致电

pager:'#thumbs', pagerAnchorBuilder: function(idx, slide) { return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>'; },

return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>';

我正试图抓住product上的背景图片。因此，不是返回+ slide.src +而是用什么来替换它？

以上抓住了图像的来源。我怎样才能获取div上的背景源而不是图像源？

我的图片位于不在<img>标记内的div上。

**感谢。 **

Answer 1

不是100％确定你想要背景图片的div，以及你想要使用它的地方，但是......

$('#product').css('background-image')会为您提供产品div的背景图片的网址。

所以，继续这一点，在你的代码中我想你需要它改为：

pager:'#thumbs', pagerAnchorBuilder: function(idx, slide) { return '<li><a href="#"><img src="' + $("#product").css("background-image") + '" width="50" height="50" /></a></li>'; },

最后的回答，感谢rsp：

pager:'#thumbs', pagerAnchorBuilder: function(idx, slide) { return '<li><a href="#"><img src="' + $("#product").css("background-image").replace('url(', '').replace(')', '') + '" width="50" height="50" /></a></li>'; }

Answer 2

您可以通过以下方式获取div的背景：

var url = $('#yourid').css('background-image')
                      .replace('url(', '')
                      .replace(')', '');

您需要删除＆＃39; url（＆＃39;和＆＃39;）＆＃39;因为CSS属性如下所示：

url(http://www.example.com/image.jpg)

Answer 3

没有jquery，这将是

 document.getElementById("slide").style.backgroundImage="url('xxx.png')";

Answer 4

var url = $("#product").css('background-image');

url = url.replace(/^url\(["']?/, '').replace(/["']?\)$/, '');

alert(url);

这可能会有所帮助

我如何在div上获取背景源

4 个答案: