Question

所以，使用html，css，javascript，我正在寻找一种方法来使我的页面加载背景图像模糊。然后，在整页加载之后，图像慢慢地从完全模糊变为完全不模糊。不是即时模糊到清脆，但我很好的转变。

不确定我是否必须有一张模糊的图片而一张不是，而且只是以某种方式慢慢切换图片？任何提示都会有所帮助。

Answer 1

模糊对Canvas来说听起来不错。也许看看http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html 您可以在页面上将画布放在屏幕上，例如：

canvas{
    position: absolute;
    top: 0px;
    z-index: 0px;
}

然后在它上面绘制背景图片模糊（看一下超链接），并使用setInterval或类似的东西逐渐解开它。

Answer 2

我设法能够使用CSS黑客模糊background-image。通常，我只会设置容器的opacity属性，但这会影响容器中的所有内容。我所做的只是使用:before伪类来仅切换背景图像。

#myContainer {
    height: 400px;
    width: 400px;
    position: relative;
    overflow: hidden;
}

#myContainer:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.1;
    background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRCFyJhwDi5ud74pENDaCIuggegz89q6Odhke5IEo7vEKwjewDxsQ);
}

h1 {
    color: blue;
}

http://jsfiddle.net/59zutyLd/1/

https://css-tricks.com/snippets/css/transparent-background-images/

要删除模糊，可以使用jQuery animate属性来实现此类

$("#myContainer:before").animate({opacity: "1.0"}, 2000)

不幸的是，伪类不是DOM的一部分，所以它们不能在jQuery中使用。

Answer 3

将 background_div 与位置：相对

保持在一起

在其中创建叠加div ，并将其保持为位置：绝对，不透明度：0.5，全宽，全高。

对叠加 div应用淡出效果我希望它能达到预期的效果。

在此尝试演示：

[1] https://jsfiddle.net/fnwL8ozg/3/

Answer 4

如果我错了，请纠正我，但是您正在寻找的是此处描述的“模糊”技术：https://css-tricks.com/the-blur-up-technique-for-loading-background-images/

TLDR：

您创建了非常小的原始图片副本
您先加载该图像，然后添加高斯模糊叠加，这样看起来就不错了
在使用基本JavaScript完成下载后，您将使用原始图片更改图片
添加过渡以使所有内容都不获利

页面加载后，慢慢消除背景图像上的模糊

4 个答案: