javascript - 雅虎在网络邮件中的新模糊效果 - 如何？

Question

我刚刚注意到，随着雅虎新的电子邮件界面升级，他们在其中一个 GUI 窗口的背景图像上使用了模糊效果。我真的很喜欢这种效果，以前认为用 javascript 和 css 完全不可能。

这是怎么做到的？

这实际上是一个有趣的案例。当页面第一次加载时，完整的图像是模糊的，如果你查看源代码，你会看到保存的图像的模糊版本。页面加载后，页面变得清晰，不包括保持模糊的 GUI 区域。同样打开 chrome web 工具会导致整个页面背景再次变得模糊。

我还没有弄清楚这一点。

Answer 1

在评论中人们提到了 CSS3 模糊过滤器。但是，您提到雅虎提供两种版本的图像 - 模糊和非模糊。这两张图片的原因是他们可能在没有使用 CSS3 模糊过滤器的情况下实现了它（或者至少对不支持模糊过滤器的浏览器有一个后备）。你本可以在 1999 年实现这种效果。

所以，这就是你如何在没有 CSS 过滤器的情况下以“经典”方式做到这一点 - 使用好的旧 CSS 黑客。

效果的基本思想类似于滑动窗口技术和精灵 - 您使用 css 背景定位来显示或隐藏背景图像的部分。

对于这种效果，结构很简单：

 ______________________________________
| main background image                |
|                                      |
|    _____________________             |
|   | inner div with      |            |
|   | blurry background   |            |
|   | image               |            |
|   |                     |            |
|   |                     |            |
|   |_____________________|            |
|                                      |
|______________________________________|

现在，这是诀窍：

1. 主要背景简单地设置在0 0。没有什么不寻常的
2. 内部 div 的 x 和 y 偏移量为x y（通过顶部、左侧或边距或填充）
3. 内部 div 的背景使用模糊图像。
4. 要使内部 div 看起来像主背景的一部分，请将 background-position 设置为-x -y

简单的例子

#main {
    position: absolute;
    background: url("background.jpg");
}
#inner {
    position: absolute;
    left: 20px;
    top: 30px;
    background: url("blurry_background.jpg") -20px -30px;
}