Как работает это фоновое изображение? - PullRequest
Новая
       0

Как работает это фоновое изображение?

2 голосов
/ 14 сентября 2011

Итак, этот веб-сайт:

http://www.atomicdust.com/

У них есть фоновое изображение на каждой странице, но при масштабировании оно не меняется - никогда.Не говоря уже о том, как быстро он загружается.Как это возможно иметь масштабирование контента без фонового изображения?Я мог понять, было ли это повторное изображение, но это не так.

Ответы [ 2 ]

5 голосов
/ 14 сентября 2011

На этом сайте это выглядит так, как будто это делается скриптом, как замечает @rownage, но я успешно сделал это в современных браузерах, используя (CSS3) свойство "cover", то есть background-size: cover; Согласно моим заметкам (ура для комментариев!) эта статья в отдельном списке - это место, откуда я получил свою информацию.

На моем (еще очень продолжающемся!) фото-сайте она выглядит как сейчас .При увеличении масштаба в браузерах, которые я пробовал, фон остается неизменным.Хотя меня не удивит, если Internet Explorer не справится с этим.

Что касается быстрых изображений на этом сайте, хитрость - это просто хороший выбор сжимаемых изображений.хорошо сжатый. Фон, загружаемый при посещении их сайта , имеет размер 1024x680 пикселей, но поскольку он в основном черно-белый с большими областями простого цвета, он сжимается до довольно маленьких 74 КБ.

1 голос
/ 14 сентября 2011

Он использует 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;

};
...