Question

我有一个由CMS创建的以下html。

<div class="item-image" style="margin-left: -154px; margin-right: -154px;"> 
   <img src="/images/header_images/placeholder_image.jpg" alt="" itemprop="image" />
</div>

如何使用jQuery从img标签中抓取图像并将其添加到＆＃34; item-image＆＃34;的样式中？ div作为背景图像？

jsfiddle here：http://jsfiddle.net/philiplocke/96h4wmkf/2/

Answer 1

试试这个：

var imageSrc = $(".item-image img").attr("src");
$(".item-image").css("background-image", "url('" + imageSrc + "')");

Answer 2

$('.item-image').css('background-image', 'url('+$('.item-image img').attr('src')+')');

Answer 3

这将获得每个.item-image div并应用删除原始图像的相应背景

$('.item-image').each(function() {
  var that = $(this);
  var url = that.find('img').attr('src');
  that.empty().css({'background':'url("' + url + '") no-repeat 50% 50%'});    
});

Answer 4

如果您想为＆＃39; item-image＆＃39;设置背景图片元件试试这个：

var src = $('.item-image img').attr('src');
$()$('.item-image').css('background-image', 'url('+ src +');');

Answer 5

图片src进入父div背景

$('.item-image').css('background-image', 'url('+$('.item-image img').attr('src')+')');
但仍然不会显示背景，因为div需要height和width，因此您还需要获取图片w/h

$('.item-image').css({'height' : $('.item-image img').outerHeight(), 'width' : $('.item-image img').outerWidth()});
如果您使用了背景相同的图片，则<img/>标记无效，请删除图片

$('.item-image img').remove();

合并代码

$('.item-image').css({
     'background-image': 'url('+$('.item-image img').attr('src')+')', 
     'height' : $('.item-image img').outerHeight(), 
     'width' : $('.item-image img').outerWidth()});
$('.item-image img').remove();

Answer 6

我用一个例子更新了你的jsfiddle。我假设您要使用原始图像中的值设置div的宽度和高度。如果没有，您应该能够根据自己的需要进行更新。记住你需要设置宽度和高度，否则根本不会看到任何东西！

我在javascript中使用了评论作为解释。

HTML：

<div class="item-image" style="margin-left: -154px; margin-right: -154px;"> 
    <img src="http://mylonhom.t8.ext.starberry.com/images/header_images/placeholder_image.jpg" alt="" itemprop="image" />
</div>

JavaScript的：

// We wan't to grab all div's with the item-image class.
// Since it is a class, we must prepare to have more than one div
// with the item-image class
$('.item-image').each(function (itemIndex, item) {
    var $item, $image, imageSrc, imageWidth, imageHeight;

    // Set a reference to the div and fetch the first available image
    $item = $(item);
    $image = $item.find('img').eq(0);

    // Did we fetch an image?
    if ($image) {
        // Let's fetch its source attribute
        imageSrc = $image.attr('src');
        imageWidth = $image.outerWidth();
        imageHeight = $image.outerHeight();

        // Now set it as a background to the div
        $item.css({
            'background-image': 'url(\''+imageSrc+'\')',
            'background-repeat': 'no-repeat',
            'width' : imageWidth + 'px',
            'height': imageHeight + 'px'
        });

        // Finally, remove the img tag from the div, we don't
        // need it there anymore
        $image.remove();
    }
});

http://jsfiddle.net/96h4wmkf/4/

从div＆amp; amp;添加为背景图像

6 个答案: