如何使用透明度模糊电子BrowserWindow

问题描述 投票:3回答:1

有可能制作一个电子的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
  • 它浮起来。 4.14.1

我有康普顿跑步。 Maybey与此有关。或者一般的合成引擎?

提前致谢!

css node.js electron transparent blur
1个回答
1
投票

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

我对它知之甚少,但也许你会更好地理解和创造你的愿景!

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

© www.soinside.com 2019 - 2024. All rights reserved.