javascript - 不加滤镜虚化背景

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>

我试过:

-使用模糊滤镜但内容也模糊了。

-使用 sprite，但由于我的背景需要居中，因此顶部看起来正常，底部模糊。

我当前的代码运行良好，但必须加载图像，当您单击 overlay/ov 时，背景变为白色，直到新的模糊背景完全加载。有什么建议吗？

Answer 1

您可以尝试通过在 html 或 javascript 中创建 Image 元素来强制浏览器下载图像。尝试添加

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

到 html 或

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

到 javascript。它不必在任何地方显示以强制下载资源。事实上，即使没有任何 var 的 new Image().src = "img/bgb.jpg"; 也应该足够了。

当您使用 css 切换背景时，模糊图像将已经加载到浏览器的缓存中并应立即显示。