半透明のアプリの背景を電子で作る方法は？

Question

私はかなりElectronに慣れていて、アプリケーションの部分が部分的に透明で、その下にあるアプリケーションのぼやけたイメージをどのように表示するのかが不思議です。
Canaryのこのスクリーンショットは、メールアプリです。私が意味するところの良い例です。

（私はプレビューで私の電子メールを編集した）

どのように私は電子で次のような効果を作成するに行きますか？具体的には、<div>要素の下にアプリケーションの不鮮明なバージョンが表示されるようにするにはどうすればよいですか？これはElectronでも可能ですか？

ありがとうございます。

Answer 1

main.jsファイルでブラウザウィンドウを設定するときは、vibrancyオプションを電子オプションの1つに設定します。

"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コード下electrons documentsから抜粋

せメインウィンドウを超暗いテーマを使用する場合、

const createWindow =() => { 
    // Create the browser window. 
    mainWindow = new BrowserWindow({ 
    width: 800, 
    height: 600, 
    vibrancy: 'ultra-dark', 
    }); 
}; 

メインウィンドウの背景を設定した後で、サイドバーとメインコンテンツをウィンドウに分割するだけです。あなたは、私はこれが