javascript – 如何使用电子制作半透明的应用背景?

前端之家收集整理的这篇文章主要介绍了javascript – 如何使用电子制作半透明的应用背景?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我对Electron很新,我想知道如何在应用程序的某些部分部分透明的情况下创建效果,并显示其下方应用程序的模糊图像.
这个电子邮件应用程序Canary的屏幕截图就是我的意思的一个很好的例子.

screenshot of Canary,a mail app. Notice the semi-transparent blurred background of the sidebar

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

我将如何在Electron中创建类似于此的效果?具体来说,我将如何制作一个< div>元素显示下面的应用程序的模糊版本吗? Electron可以实现这一点吗?

提前谢谢你的帮助.

最佳答案
在main.js文件中设置浏览器窗口时,将vibrancy选项设置为电子选项之一.

下面是电子文件的片段

"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样式透明度

我希望这有帮助

原文链接:https://www.f2er.com/js/429198.html

猜你在找的JavaScript相关文章