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时，背景变为白色，直到新的模糊背景完全加载。任何sugestions？

Answer 1

这样做的唯一方法是将这样的东西混在一起：

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

然后调整背景的位置：

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

Answer 2

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

<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切换背景时，模糊图像将已加载到浏览器的缓存中并应立即显示。

在没有滤镜的情况下模糊背景

2 个答案: