获取背景图像宽度

Obtain background image width

本文关键字：图像 背景 获取      更新时间：2023-09-26

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

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

我需要这样的东西:

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

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;

警告:我犯了一个错误，当正文没有指定背景图像时，请记住这一点

是可能得到背景图像的宽度，这是在CSS中定义的?

我不这样认为，但你应该能够使用一个小技巧:将图像加载到img元素中，如本问题所述。

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

如果不绕道而行，这是不可能直接完成的。

  1. 使用JQuery来检测背景图像，使用imagesLoaded(推荐)或onImagesLoad插件。
    2. 使用JQuery的尺寸插件来获取图像的大小。
相关文章：