Posted at

Electronで半透明なウィンドウを作る方法 2019年版

Electronで半透明なウィンドウを作る方法を調べても古い方法しかなかなか見つからなかったので、最新のやり方をメモしておきます。

2019/03 現在のバージョン(4.1系)ではウィンドウを半透明にするためにCSSを使う必要はありません

2つ方法があります。


方法1

win = new BrowserWindow({

width: 800,
height: 600,
opacity: 0.5 // これだけ!
})

これだけでウィンドウが半透明になります。1で不透明、0で完全に透明です。


方法2

win = new BrowserWindow({

width: 800,
height: 600,
transparent: true, // これと
backgroundColor: '80FFFFFF' // これだけ!
})

こちらの方法の場合、背景色だけが半透明になるので、その上の要素(文字など)は半透明になりません。

backgroundColorの値はCSSと違いARGB(Alphaが最初)な点に注意しましょう。


参考