我对Electron很新,我想知道如何在应用程序的某些部分部分透明的情况下创建效果,并显示其下方应用程序的模糊图像.
这个电子邮件应用程序Canary的屏幕截图就是我的意思的一个很好的例子.
(我在预览中编辑了我的电子邮件)
我将如何在Electron中创建类似于此的效果?具体来说,我将如何制作一个< div>元素显示下面的应用程序的模糊版本吗? Electron可以实现这一点吗?
提前谢谢你的帮助.
最佳答案
在main.js文件中设置浏览器窗口时,将vibrancy选项设置为电子选项之一.
原文链接:https://www.f2er.com/js/429198.html下面是电子文件的片段
"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
让mainWindow;
const createWindow = () => {
// Create the browser window.
mainWindow = new BrowserWindow({
width: 800,height: 600,vibrancy: 'ultra-dark',});
};
在设置了主窗口的背景和振动设置后,只需用侧边栏和主要内容将窗口分开.将main的背景颜色设置为您希望离开侧边栏的任何颜色仍然具有OSX样式透明度
我希望这有帮助