2

可能重复：
从 background-image 属性获取 URL

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

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 上的背景源而不是图像源？

我的图像在 div 上而不是在<img>标签内。

**谢谢。**

4

4 回答 4

3

不是 100% 确定你想要哪个 div 的背景图像，以及你想在哪里使用它，但是......

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

因此，从这一点开始，在您的代码中，我认为您需要将其更改为：

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>'; }
于 2012-09-21T15:05:44.380 回答
2

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

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

您需要删除 'url(' 和 ')' 因为 CSS 属性如下所示：

url(http://www.example.com/image.jpg)
于 2012-09-21T15:09:57.810 回答
1

没有 jquery，这将是

 document.getElementById("slide").style.backgroundImage="url('xxx.png')";
于 2012-09-21T15:08:57.410 回答
1 
var url = $("#product").css('background-image');

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

alert(url);

这可能会有所帮助

于 2012-09-21T15:24:24.777 回答