通过javascript将背景图像添加到div

<div class="splash-image-wrap splash-image"> 
<img class="splash-image-bg" src="http://mysite-com/image.jpg" alt="image-bg"> 
</div>

你能帮我一个添加img src url作为图像背景的包装div的脚本吗？通过javascript将背景图像添加到div

我想这一点，但不起作用

$(function() { 

function updatePageForTopImg(){ 
    // background image using size cover 
    // top background image 
    $('.splash-image-wrap').css('background-image', 'url('+$(".splash-image-bg").attr("src")+')').css('background-size' , 'cover').css('background-position' , 'top center'); 
} 
$(window).on('load', function(){ 
updatePageForTopImg(); 
}); 
});

来源

2015-10-13 Sam Provides

可能重复[如何更改div的背景图像使用JavaScript？]（http://stackoverflow.com/questions/21496905/how-to-change-the-background-image-of-div-using- javascript） –

如何在纯CSS中做到这一点？正如我在你的代码中看到的那样，你的图像的src已经变成了aviable。如果你希望能够打开或关闭背景，你应该实现代表两个切换状态的CSS规则。通过JS应用大量的CSS是一种不好的做法。 –

假设你正在加载jQuery库，下面应该工作：

$('.splash-image-wrap').css({ 
    'background-image': 'url(" + $('.splash-image-bg').attr('src') + ")', 
    'background-size': 'cover', 
    'background-position': 'top center' 
});

如果没有，你需要重写你的功能使用香草JS。

来源

2015-10-13 07:59:09

你有正确的代码，但不知道为什么你有一个$(window).load。这里是一个工作版本

的jsfiddle：https://jsfiddle.net/CanvasCode/rn7ejrke/1/

jQuery的

function updatePageForTopImg() { 
     // background image using size cover 
     // top background image 
     $('.splash-image-wrap') 
      .css('background-image', 'url(' + $(".splash-image-bg").attr("src") + ')') 
      .css('background-size', 'cover') 
      .css('background-position', 'top center'); 
    } 

$(function() { 
    updatePageForTopImg(); 
});

来源

2015-10-13 08:02:47 Canvas

你想保留的东西，在你的CSS文件是静态的，如背景，规模和背景的位置。

JS：

$('.splash-image-wrap').css({ 
    background-image: 'url(" + $('.splash-image-bg').attr('src') + ")' 
});

CSS：

.splash-image-bg { 
    background-size: cover; 
    background-position: center top; 
}

另外，作为一个旁注，你不需要window.load或document.ready在你的代码你已经把它包像$(function(){})后。

window.load用于等待内部帧和图像加载。既然你还没有注入你的背景图片，你不需要等待它来运行你的代码。

另外，document.ready相当于包装你的功能，如你已经在做的$(function() {。你可以完全取消这些并使其仍然有效。

来源

2015-10-13 08:04:54

准确答案！删除了我的帖子;）没有在'（function（）{}）'+1前面实现'$' – Martin

通过javascript将背景图像添加到div

回答

相关问题