如何用电子制作半透明的app背景？

Question

我对Electron很新,我想知道如何在应用程序的某些部分部分透明的情况下创建效果,并显示其下方应用程序的模糊图像.
这个电子邮件应用程序Canary的屏幕截图就是我的意思的一个很好的例子.

(我在预览中编辑了我的电子邮件)

我将如何在Electron中创建类似于此的效果？具体来说,我如何使<div>元素显示下面的应用程序的模糊版本？Electron可以实现这一点吗？

提前谢谢你的帮助.

Answer 1

在 main.js 文件中设置浏览器窗口时，将 vibrancy 选项设置为电子选项之一。

electrons documents下面的一个片段

"vibrancy String (optional) - Add a type of vibrancy effect to the window, only on macOS. 
Can be appearance-based, light, dark, titlebar, selection, menu, popover, sidebar, medium-light or ultra-dark."

https://github.com/arkenthera/electron-vibrancy/blob/master/README.md

如果使用超暗主题，则示例 js 代码

让主窗口；

const createWindow = () => {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    vibrancy: 'ultra-dark',
  });
};

在设置了活力设置的主窗口背景后，只需将窗口与侧边栏和主要内容分开即可。将 main 的背景颜色设置为您希望的任何颜色，让侧边栏保持其 OSX 风格的透明度

我希望这有帮助