这个背景图片是如何工作的？

Question

所以这个网站：

http://www.atomicdust.com/

他们在每个页面上都有一个背景图像，但是当缩放，它永远不会改变。更不用说它的加载速度有多快了。如何在没有背景图片的情况下实现内容缩放？我可以理解这是不是重复的图像，但事实并非如此。

Answer 1

在该网站上，它看起来好像是由脚本完成的，正如 @rownage 观察到的那样，但我已经在现代浏览器中使用（CSS3）“cover”属性成功完成了它，即 background-size: cover;background-size: cover; 根据我的笔记（欢迎评论！）这篇列出的文章< /a> 是我从哪里得到我的信息。

在我的（仍在进行中！）照片网站上，目前看起来像这样。当放大我尝试过的浏览器时，背景保持相同的大小。如果 Internet Explorer 无法处理它，我也不会感到惊讶。

至于该网站上的图像加载速度快，诀窍只是选择一个良好压缩的可压缩图像。 我访问他们的网站时加载的背景是1024x680像素，但因为它主要是黑色和白色加上大面积的纯色，它被压缩到非常小的 74KB。

Answer 2

它使用 jQuery 和这个：

$.fn.bgResize = function(options) {

    var defaults = {  
        imageWidth: 800,
        imageHeight: 600
    };

    var options = $.extend(defaults, options);

    var obj = $(this);

    var initHtml = obj.html();

    var windowHeight = $(window).height();
    var windowWidth = $(window).width();

    obj.height(windowHeight);
    obj.width(windowWidth);
    $('#work-wrapper').height(windowHeight);
    $('#work-wrapper').width(windowWidth);

    obj.html('<div id="inner-bg">'+initHtml+'</div>');

    $('#inner-bg img').each(function(){
        $(this).css({'display' : 'block', 'width' : '100%', 'height' : '100%'})                              
    });

    function doResize(){

        var screenheight = $(window).height();
        var screenwidth = $(window).width();

        var imageheight = options.imageheight;
        var imagewidth = options.imagewidth;

        var ratio = imagewidth/imageheight;

        var testwidth = screenheight * ratio;
        var testheight = screenwidth / ratio;

        obj.height(screenheight);
        obj.width(screenwidth);
        $('#work-wrapper').height(screenheight);
        $('#work-wrapper').width(screenwidth);

        if (testheight < screenheight){
            obj.children('#inner-bg').width(testwidth);
            obj.children('#inner-bg').height(testwidth/ratio);
            var finalheight = Math.round(testwidth/ratio);
            var finalwidth = testwidth;
            var topoffset = (finalheight - screenheight)/2;
            var leftoffset = (finalwidth - screenwidth)/2;
        }

        else if (testheight > screenheight){
            obj.children('#inner-bg').height(testheight);
            obj.children('#inner-bg').width(testheight * ratio);
            var finalwidth = Math.round(testheight * ratio);
            var finalheight = testheight;
            var topoffset = (finalheight - screenheight)/2;
            var leftoffset = (finalwidth - screenwidth)/2;
        }

        else {}

        obj.children('#inner-bg').css("top", -topoffset);
        obj.children('#inner-bg').css("left", -leftoffset);

    }

    doResize();

    $(window).resize(function(){
        doResize();
    });


    return this;

};