如何用电子制作半透明的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

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