javascript - 如何用 Electron 制作半透明的应用程序背景？

Question

我是 Electron 的新手，想知道如何在应用程序的某些部分部分透明时创建效果，并在其下方显示应用程序的模糊图像。
这个 Electron 邮件应用程序 Canary 的屏幕截图很好地说明了我的意思。

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

我将如何在 Electron 中创建与此类似的效果？具体来说，我将如何制作 <div>元素下面显示的是模糊版的应用程序吗？这甚至可以用 Electron 实现吗？

提前感谢您的帮助。

Answer 1

在 main.js 文件中设置浏览器窗口时，将活力选项设置为 Electron 选项之一。

electrons 文档 中的一段代码

"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 风格透明度

希望对你有帮助