如何用电子制作半透明的应用背景？答案

【问题标题】：How to make a semi-transparent app background with electron?如何用电子制作半透明的应用背景？
【发布时间】：2017-08-23 00:33:52
【问题描述】：

我对 Electron 很陌生，我想知道如何创建应用程序部分透明的效果，并在它们下方显示应用程序的模糊图像。
电子邮件应用程序 Canary 的屏幕截图很好地说明了我的意思。

（我在预览中编辑了我的电子邮件）

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

提前感谢您的帮助。

【问题讨论】：

有一个名为electron-vibrancy 的“插件”可以让你这样做

标签： javascript electron transparent

【解决方案1】：

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

来自electrons documents下方的sn-p

"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 样式透明度的任何颜色

希望对你有帮助

【讨论】：

【解决方案2】：

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

【讨论】：

这个问题与不透明度无关；这是关于活力/模糊。