2

重複の可能性:
background-image プロパティから URL を取得

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 にあります。

**ありがとう。**

4

4 に答える 4

3

背景画像が必要なdivと、それを使用したい場所が100％確実ではありませんが...

$('#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(')', '');

CSS プロパティは次のようになっているため、「url(」および「)」を削除する必要があります。

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 に答える