Размытие фона без фильтра

Question

Я делаю сайт и у меня есть этот код, который размыть фон:

CSS

#background{ 
    background: url(img/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    width: 100%; 
    min-height: calc(100% - 96px); 
    -o-transition: all 750ms; 
    -moz-transition: all 750ms; 
    -webkit-transition: all 750ms; 
    transition: all 750ms 
} 

.covered{ 
    background: url(img/bgb.jpg) no-repeat center center fixed!important; 
    -webkit-background-size: cover!important; 
    -moz-background-size: cover!important; 
    -o-background-size: cover!important; 
    background-size: cover!important; 
} 

JQuery

$('.overlay,.ov').click(function(){ 
    $('#background').addClass('covered'); 
} 

HTML

<div id="background"> 
    //content of my page 
</div> 

Я пробовал:

-Использование blur filter но содержание размывает тоже.

-Использование спрайта, но поскольку мой фон должен быть центрирован, появляется верхняя часть нормальная, а нижняя часть размыта.

Мой текущий код работает отлично, но изображение загружается, и когда вы нажимаете overlay/ov, фон становится белым, пока новый размытый фон не будет полностью загружен. Любые предложения?

Answer 1

Вы можете попробовать принудительную браузер для загрузки изображения путем создания Image элемент, либо в html, либо в javascript. Попробуйте добавить

<img src="img/bgb.jpg" style="display:none">` 

в HTML или

var bbg = new Image(); 
bbg.src = "img/bgb.jpg"; 

в JavaScript. Его не нужно показывать нигде, чтобы принудительно загружать ресурсы. В действительности даже голых new Image().src = "img/bgb.jpg";, без каких-либо вар, должно быть достаточно.

При переключении фона с помощью css размытое изображение уже загружается в кеш браузера и должно отображаться немедленно.

Answer 2

Единственный способ сделать это, чтобы взломать вместе что-то вроде этого:

<div class="wrapper"> 
    <div class="background"></div> 
    <div class="content"></div> 
</div> 

Затем отрегулируйте расположение фона:

.background { 
    position: fixed; 
    left: 0; 
    right: 0; 
    z-index: 1; 
}