如何用電子製作半透明的應用程序背景？

Question

我對Electron相當陌生，想知道如何在部分應用程序部分透明的情況下創建效果，並在其下方顯示應用程序的模糊圖像。
加那利的電子郵件應用程序截圖就是我的意思的一個很好的例子。

（我編輯了我的預覽電子郵件）

如何我會去創造在電子與此類似的效果呢？具體來說，我會如何讓一個<div>元素在其下面顯示應用程序的模糊版本？這甚至可能與電子？

非常感謝您的幫助。

Answer 1

在main.js文件中設置瀏覽器窗口時，請將vibrancy選項設置爲一個electron選項。

從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', 
    }); 
}; 

在設置主窗口的背景和設置了活力之後，只需將窗口與側邊欄和主要內容分開即可。主背景色設置爲任何顏色，你祝離開側邊欄仍然以其OSX風格透明度

我希望這有助於