使用图像变量设置 div 的背景图像？答案

【问题标题】：Setting the background image of a div using an image var?使用图像变量设置 div 的背景图像？
【发布时间】：2012-02-23 15:33:51
【问题描述】：

谁能建议我如何做到这一点：
使用图像变量我想设置 div 的背景，尽管不使用图像的源/url。例如，这不起作用：

var img = new Image();
img.onload = function() {
   $('#div').css("background-image", img);
}
img.src = "http://example.com/image.jpg";

基本上，我正在尝试设置背景图像的宽度/高度，以便它很好地适合 div。我认为使用图像变量是唯一的方法，但如果不是，请建议我该怎么做。谢谢您的帮助！ :)

【问题讨论】：

标签： jquery set background-image

【解决方案1】：

您不需要使用图像对象，只需将其设置为字符串即可。例如

var src = 'http://example.com/image.jpg';

$('#div').css('background-image', 'url(' + src + ')');

记得添加网址位；）

希望有帮助:)

编辑

抱歉，我刚刚意识到您正在使用图像对象来预加载它...不过，在这种情况下，这个：

var src = 'http://example.com/image.jpg';

$('<img/>').load(function(){

    $('#div').css('background-image', 'url(' + src + ')');

}).attr("src",src);

这应该可以解决问题。

【讨论】：

.src(src); -> .attr("src",src);

【解决方案2】：

试试这个：

var img = new Image();
img.onload = function() {
   $('#div').css("background-image", "url(" + img.src + ")");
}
img.src = "http://example.com/image.jpg";

此外，如果图像被缓存，onload 并不总是足以预加载图像，它可能不会触发加载事件。

var img = new Image();
function imgLoaded() {
  $('#div').css("background-image", "url(" + img.src + ")");
}
img.onload = imgLoaded;
img.src = "http://example.com/image.jpg";
if (img.complete || img.readystate === 4) {
  imgLoaded();
}

【讨论】：

【解决方案3】：

您可以做的是创建一个绝对定位的 img，然后使用图像属性设置宽度和高度。通过绝对定位它，您可以让它显示在其他内容的后面。

试一试，如果遇到问题，请提供代码 sn-p，我可以帮助您正确获取 html 和 css。

【讨论】：

【解决方案4】：

您不能设置背景图像的宽度/高度。唯一的方法是在 CSS3 中使用 background-size 属性或在 div 的内容后面使用绝对定位的图像。

【讨论】：