More than 5 years have passed since last update.

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

Posted at 2019-03-27

Electronで半透明なウィンドウを作る方法を調べても古い方法しかなかなか見つからなかったので、最新のやり方をメモしておきます。
2019/03 現在のバージョン(4.1系)ではウィンドウを半透明にするためにCSSを使う必要はありません。

２つ方法があります。

方法1

win = new BrowserWindow({
  width: 800,
  height: 600,
  opacity: 0.5 // これだけ！
})

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

win = new BrowserWindow({
  width: 800,
  height: 600,
  transparent: true, // これと
  backgroundColor: '80FFFFFF' // これだけ！
})

こちらの方法の場合、背景色だけが半透明になるので、その上の要素(文字など)は半透明になりません。
backgroundColorの値はCSSと違いARGB(Alphaが最初)な点に注意しましょう。