在没有滤镜的情况下模糊背景 [英] Blur the background without filter

问题描述

我正在建立一个网站，并且我有这段使背景模糊的代码:

I'm making a website and I have this code that blur out the background:

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，但是内容也模糊了.

-Using blur filter but the content blurs out too.

-使用精灵，但由于我的背景需要居中，因此顶部显示为正常，而底部显示为模糊.

-Using a sprite but since my backgrounds needs to be centered it appears the top part normal, and the bottom part blurred.

我当前的代码效果很好，但是图像必须加载，并且当您单击"overlay/ov"时，背景会变成白色，直到新的模糊背景完全加载为止.有任何建议吗?

My current code works great but the image has to load and when you click overlay/ov the background turns white until the new blurry background fully loaded. Any sugestions?

推荐答案

您可以尝试通过创建Image元素(使用html或javascript)来强制浏览器下载图像.尝试添加

You may try forcing browser to download image by creating Image element, either in html or in javascript. Try adding

<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";也应该足够了.

to javascript. It doesn't have to be shown anywhere to force resource download. In facts, even bare new Image().src = "img/bgb.jpg";, without any var, should be enough.

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

When you switch the background with css, blurred image will be already loaded into browser's cache and should show immediately.

这篇关于在没有滤镜的情况下模糊背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！