如何使电子BrowserWindow具有透明度

时间:2019-04-21 18:29:22

标签: css node.js electron transparent blur

问题

是否可以制作BrowserWindow电子透明的带有模糊的图像?这样会模糊所有背景内容,包括应用程序和墙纸。

如果可能的话,我该怎么做?

示例

这是我尝试过的一些代码。
index.js

let win = new BrowserWindow({
    fullscreen: true,
    fullscreenable: false,
    frame: false,
    skipTaskbar: true,
    resizable: false,
    movable: false,
    show: false,
    alwaysOnTop: true,
    transparent: true
})

style.css

html, body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: rgb(255, 255, 255);
    backdrop-filter: blur(4px);
}

html只是带有h1标签的文本正文。
尽管这只会在窗口中创建黑色背景。

我读到一些有关的内容:

webPreferences: {
    experimentalFeatures: true
}

但是无法使其正常工作。

环境

  • Ubuntu:18.04.2
  • 节点:v10.15.3
  • npm:6.4.1
  • i3wm。 4.14.1

我正在运行 compton 。也许与此有关。还是一般的合成引擎?

谢谢!

2 个答案:

答案 0 :(得分:1)

有一个图书馆正是出于这个原因!

我对此了解不多,但是也许您将有更多的时间来理解和创造自己的愿景!

https://www.npmjs.com/package/@hxkuc/electron-vibrancy

答案 1 :(得分:0)

试试这个。 electron-vibrancy 是一个“增添活力”的图书馆。它声称还为背景添加了模糊效果。