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

Question

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

这是怎么做到的？

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

这个我还没想好。

Answer 1

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

因此，这里是您可以在没有 CSS 过滤器的情况下以“经典”方式实现它的方法 - 使用优秀的旧 CSS hackery。

该效果的基本思想类似于滑动窗口技术和 Sprite - 您可以使用 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;
}