获取背景图像宽度

Question

是否可以获得CSS中定义的背景图像宽度？

body {
    background-image: url('background.jpg');
}

我需要这样的东西：

window.getComputedStyle(document.body, 'background-width');

Answer 1

  

是否可以获得CSS中定义的背景图像宽度？

我不这么认为，但您应该能够使用一个小技巧：将图像加载到in this question所述的img元素中。

如果在文档完全加载后执行此操作，浏览器应从缓存中获取图像。

Answer 2

var u = window.getComputedStyle(document.body, 'background-image');
u = u.replace(/url\(/, '').replace(/\)/, '');
var w = 0;
var i = new Image();
i.onload = function( ){ w = this.width; alert(w); }
i.src = u;

警告：我已经省略了一个案例，当正文没有指定背景图片时，请记住这一点。

Answer 3

如果没有某种解决办法，就不可能直接做到这一点。

1. 使用JQuery通过imagesLoaded（推荐）或onImagesLoad插件检测背景图像。
2. 使用JQuery Dimensions plugin获取图片大小。