HTML 桌面应用程序 - 如何：模糊背景？答案

【问题标题】：HTML Desktop App - How to: Blurry Background?HTML 桌面应用程序 - 如何：模糊背景？
【发布时间】：2015-03-04 09:27:23
【问题描述】：

我想再次开始为 Windows 开发 HTML 桌面应用程序。我还没有决定要在哪个框架上构建它，所以我对此相当灵活。现在..我有一个要求：在我要创建的两个应用程序中，我希望有一个透明背景，这不仅是透明的，而且还会模糊它下面的内容 - 类似于你得到的所有效果在 OSX Yosemite 和最新的 iOS 上

这里可以看到一张我大致想要达到的效果图：https://d13yacurqjgara.cloudfront.net/users/107587/screenshots/1598097/vk_os_x_player_dribbble.png

现在，有没有人知道如何在......比如说...... AppJS 或 Chrome 打包应用程序或使用 TideSDK 或 node webkit 中实现这一点？

编辑 - 当我尝试使用 AppJS 程序执行建议的操作时，我只会得到黑色背景。不是透明的。我想我也知道如何在浏览器中实现这一目标。但不是在应该运行的应用程序中桌面。

【问题讨论】：

对我来说看起来像一个渐变。但是您可以使用 css 过滤器进行模糊处理。
这个问题之前有人问过：stackoverflow.com/questions/17034485/…
好的澄清一下：我具体不是问一般如何实现效果，而是如何在打包的应用程序中实现。例如，如果我尝试使用 AppJS 应用程序执行此操作，它根本不适用于应用程序窗口。它不会模糊我的 Windows 背景，甚至不会变得透明。在 TideSDK 中基本上是同样的问题。我无法让它模糊其背后的应用程序或我的桌面。

标签： html node-webkit tidesdk google-chrome-app appjs

【解决方案1】：

#myDiv {
-webkit-filter: blur(20px);
-moz-filter: blur(20px);
-o-filter: blur(20px);
-ms-filter: blur(20px);
filter: blur(20px);
opacity: 0.4;
}

【讨论】：

您能否添加更多信息，也许一些更具体的 html 将与此 CSS 一起实现预期效果？
虽然如果将 div 放在 .. 说 .. 和图像上，这可以完美地工作，但它不适用于使用 AppJS 或 TideSDK 构建的打包应用程序的背景。在这种情况下，背景只是黑色或白色，它不会模糊它后面的任何东西，它后面是指我的 Windows 桌面或我放在它后面的任何窗口。
如果您使用纯色背景 - 您将无法看到模糊效果。你可以给颜色加一点颜色，这样盒子仍然可见吗？

【解决方案2】：

Windows 有一个本机方法，它接受窗口句柄并允许您实现所需的模糊效果。请参阅this example，了解如何在 C/C++ 中使用该方法。如果您希望能够从 node-webkit 代码中调用它，那么您可能需要使用 node-ffi 来完成工作。

即使有这两件事，我也从未亲自尝试访问由 node-webkit 创建的窗口的窗口句柄，所以我什至不知道它实际上是多么容易/困难/可能，但我希望这至少能让你开始。

【讨论】：

感谢您的技巧，但文章下方的评论指出它不适用于 Windows 8。所以我想这对我来说不可行。附带说明：是否可以通过某种方式读取帧缓冲区，然后模糊图像，将所需区域设置为背景并每秒更新 60 次来创建这种效果，还是会出现性能问题？
我以前从未尝试过以这种方式创建模糊效果，所以我真的不能说这是否会成为性能问题，或者它是否会达到预期的效果。