Question

任何人都可以建议我如何做到这一点：
使用图像变量我想设置div的背景，虽然没有使用图像的源/网址。例如，这不起作用：

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

基本上，我正在尝试设置背景图像的宽度/高度，以便很好地适应div。我认为使用图像变量是唯一的方法，但如果不是，请建议我如何做到这一点。谢谢您的帮助！：）

Answer 1

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

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

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

请记住添加URL位;）

希望有所帮助：）

修改

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

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

这应该可以解决问题。

Answer 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();
}

Answer 3

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

Answer 4

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

尝试一下，如果您遇到问题，请提供一个代码段，我可以帮助您更正确地使用HTML和CSS。

使用图像var设置div的背景图像？

4 个答案: