Добавьте размытие CSS на фон fancyBox2

Я предполагаю, что вы имеете в виду нечто подобное. JSFIDDLE.

JQuery

$(".fancybox").fancybox({
    beforeShow: function () {
        $("body *:not(.fancybox-overlay, .fancybox-overlay *)").addClass("blur");
    },
    afterClose: function () {
        $("body *:not(.fancybox-overlay, .fancybox-overlay *)").removeClass("blur");
    }
});

CSS

.blur {
    -webkit-filter: blur(5px)
}

Как указывает Мартин Ковачев в комментариях, это может быть очень ресурсоемким для CPU, а также вызвать некоторые проблемы с задержкой и/или странными проблемами производительности. Поэтому может оказаться полезным добавить аппаратное ускорение. Чаще всего используется 3D-эмуляция, когда 3D-слой добавляется, но фактически не используется, например, путем установки translateZ(0) или translate3D(0,0,0).

Смотрите эту скрипку

Просто добавьте размытие класса ко всем элементам за пределами наложения и добавьте фильтр размытия в CSS, тогда вам понадобится дополнительный смайлик SVG для Firefox.

JQuery

$(".fancybox").fancybox({
    beforeShow: function () {
        $("body *:not(.fancybox-overlay, .fancybox-overlay *)").addClass("blur");
    },
    afterClose: function () {
        $("body *:not(.fancybox-overlay, .fancybox-overlay *)").removeClass("blur");
    }
});

CSS

.blur {
    -webkit-filter: blur(5px);
    filter:url(#blur-effect-2);
}

HTML (это необходимо для Firefox)

<svg id="svg-image-blur">

    <filter id="blur-effect-2">
        <feGaussianBlur stdDeviation="5" />
    </filter>
</svg>

У меня была такая же проблема, размытие уже находится в функции fancybox, но если вы не видите размытие, возможно, потому, что у вас нет fancybox_overlay.png в вашей папке CSS.

Это обычная ошибка, потому что после загрузки zip-папки мы извлекаем только CSS и JS и забываем о дополнительных изображениях, которые находятся в папке zip. Посмотрите элемент, и вы увидите, что он покажет fancybox_overlay.png.

вы можете добавить некоторую оболочку, чтобы добавить фильтр, подобный этому

<div id="wrapper">
    <a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>

    <a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>
</div>    

js, а затем установите фильтр на afterload и удалите его после закрытия

$(".fancybox").fancybox({
    afterLoad:function(){
        $("#wrapper").css('-webkit-filter','blur(15px)');
    },
    afterClose:function(){
        $("#wrapper").css('-webkit-filter','');
    }
});    

http://jsfiddle.net/jRsjK/6870/

DEMO

Его уже там в fancybox

$(".fancybox").fancybox();