search
LoginSignup
1
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

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が最初)な点に注意しましょう。

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
1
Help us understand the problem. What are the problem?