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

我想再次开始使用适用于Windows的HTML桌面应用程序。我还没有决定在哪个框架上构建它，所以我对此非常灵活。现在..但我有一个要求：在我想要创建的两个应用程序中，我想要有一个透明背景，这不仅是透明的，而且还会模糊它下面的内容 - 类似于您获得的所有效果在OSX Yosemite和最新的iOSHTML桌面应用程序 - 如何：模糊背景？

在这里你可以看到效果的照片，我大概想实现：https://d13yacurqjgara.cloudfront.net/users/107587/screenshots/1598097/vk_os_x_player_dribbble.png

现在，不anyoneone知道如何实现，在..说.. AppJS或Chrome打包的应用程序或TideSDK或节点webkit？

编辑 - 当我尝试用AppJS程序做推荐的东西时，我只是得到一个黑色的背景。不是一个透明的。我想我也知道如何在浏览器中实现这一点。但不是在应该运行在桌面上的应用程序中。

来源

2015-01-06 Escapado

对我来说看起来像一个渐变。但你可以使用css过滤器进行模糊处理。 – xdhmoore

这个问题已经被问过： http://stackoverflow.com/questions/17034485/ios-7s-blurred-overlay-effect-using-css – Chris

好了澄清：我特别不问如何实现效果一般，但如何实现它呐封装的应用程序。例如，如果我尝试使用AppJS App来做到这一点，它对于应用程序窗口就不起作用。它不会模糊我的窗口背景，甚至不会透明。在TideSDK中，它基本上是同样的问题。我无法让它模糊应用程序或我的桌面。 – Escapado

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

来源

2015-01-06 16:52:31 Chris

你可以添加更多的信息，也许更具体的HTML，将与这个CSS会达到预期的效果？ –

虽然这完美的作品，如果该div放在..说..和图像，它不会工作在打包的应用程序，使用AppJS或TideSDK构建的背景。在这种情况下，背景只是黑色或白色，它并不模糊背后的任何东西，背后它的意思是我的Windows桌面或我放在背后的那个窗口。 – Escapado

如果您使用的是坚实的背景 - 您将无法看到模糊效果。 YOu也许可以为颜色添加色调，以便该框仍然可见？ – Chris

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

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

来源

2015-01-17 06:16:29

感谢您的技巧，但文章中的评论指出，它不会与Windows 8的工作。所以我想这是对我来说不可行。在旁注中：可以通过读取帧缓冲区来创建这种效果，然后模糊图像，将需要的区域设置为背景并每秒更新60次，否则这会是性能问题？ – Escapado

我从来没有尝试过以这种方式创建模糊效果，所以我真的不能说这是否会成为性能问题，或者甚至会达到预期的效果。 –

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

回答

相关问题