如何用电子制作半透明的应用程序背景？

Question

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

（我在预览中删除了我的电子邮件）

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

提前感谢您的帮助。

Answer 1

在 main.js 文件中设置浏览器 window 时，将活力选项设置为电子选项之一。

摘自下方 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',
  });
};

设置主要 window 的背景和活力设置后，只需将 window 与侧边栏和主要内容分开即可。将 main 的背景颜色设置为您希望的任何颜色，使侧边栏保持其 OSX 样式透明度

希望对您有所帮助

Answer 2

您可以在 window setOpacity(number) 上使用函数，其中数字可以根据您的喜好设置。

如何用电子制作半透明的应用程序背景？

How to make a semi-transparent app background with electron?

javascript

electron

transparent