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

Question

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

这是怎么做到的？

这实际上是一个有趣的案例。首次加载页面时，整个图像模糊，如果您查看来源，您会看到保存的图像模糊版本。页面加载后，页面清晰，排除了模糊的GUI区域。同时打开chrome web工具会导致整个页面背景再次模糊。

我仍然没有想到这一点。

Answer 1

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

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

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

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

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

现在，这就是诀窍：

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

简单示例

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