在页面加载后慢慢去除背景图像上的模糊

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

我设法能够模糊background-image使用CSS hack。通常，我只会设置容器的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:

1. 您创建了原始图片的非常小的副本
2. 你先加载它，然后添加高斯模糊叠加，这样看起来就不那么糟糕了
3. 在下载完成基本JavaScript后，您可以将pic更改为原始
4. 添加过渡来模糊none和profit