如何用电子制作半透明的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代码，如果使用超暗主题

让mainWindow;

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

在设置了主窗口的背景和振动设置后，只需用侧边栏和主要内容将窗口分开。 将main的背景颜色设置为您希望离开侧边栏的任何颜色仍然具有OSX样式透明度

我希望这有帮助

Answer 2

你可以在window setOpacity(number)上使用一个函数，其中number可以根据你的喜好。