Question

我在另一篇文章中找到了这个代码，展示了如何用div替换图像，同时保留图像的属性。我希望图像源是替换它的div的背景图像..

我找到的代码是

$('.produkt_billede > img').each(function(){
    $div = $('<div>').html($(this).attr('src'));
    $(this).replaceWith($div);
});

我想要的结果是：

<div style="background-image: url('image.png');" class="something"></div>

感谢。

Answer 1

您需要做的是在创建<div>时定义$('.produkt_billede > img').each(function(){ var path_to__image = $(this).attr('src'); $div = $('<div>', { 'style': 'background-image: url("'+ path_to__image +'");', 'class': 'something' }); $(this).replaceWith($div); });的相应属性：

style

创建元素时，第二个参数可以是为其定义新属性的对象。在这种情况下，我定义了class和{{1}}属性;如果需要，您可以添加更多。

Answer 2

$('.produkt_billede > img').each(function(){
    $div = $('<div>').css({'background-image': "url(" + $(this).attr('src') + ")"}).addClass("something");
    $(this).replaceWith($div);
});

我认为应该这样做。

请注意，您需要通过css或js设置结果div的div和高度，否则它将折叠为0和0，因为它不包含任何内容，使div不可见：http://jsfiddle.net/t1L43vxr/1/ < / p>

使用图像路径作为div背景

2 个答案: