如何模糊具有透明度的电子浏览器窗口

Question

问题

是否有可能使电子中的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
}

但无法让它工作。

环境

• 乌班图： 18.04.2
• 节点：v10.15.3
• NPM：6.4.1
• i3WM. 4.14.1

我有康普顿跑步。也许与此有关。还是一般的合成引擎？

提前感谢！

Answer 1

电子亚克力窗口

实际上，这是可能的，只要有一点点魔法。我不知道为什么没有人指出这一点，但是有一个叫做电子丙烯酸窗口的小实用程序，它可以让你做到这一点。您可以在丙烯酸("磨砂")和模糊效果之间进行选择，以及更改窗口的颜色和不透明度。

在后台，它使用 node-gyp 和低级 C++ 代码来呈现您喜欢的页面。在Javascript中实现它非常容易。

主要缺点是任何远程透明的东西(而不是高于任何纯色的东西)都将被渲染为完全透明。

还应注意严重的性能影响。只有在提示用户或验证将运行所有这些操作的计算机的计算能力后，才应在应用中启用此功能。它也可能与更改桌面行为的程序(即壁纸引擎)不兼容。

示例用法

index.js

const { BrowserWindow } = require('electron-acrylic-window');
// import { BrowserWindow } from 'electron-acrylic-window';
win = new BrowserWindow({
...,
frame: false,
vibrancy: {
theme: 'light', // (default) or 'dark' or '#rrggbbaa'
effect: 'acrylic', // (default) or 'blur'
disableOnBlur: true, // (default)
}
});
// alternatively use these to
// dynamically change vibrancy
win.setVibrancy([options])
// or
setVibrancy(win, [options])

style.css

body {
background-color: transparent;
}
.watev {
background-color: black;
}

Answer 2

无法在后台模糊其他应用程序。 https://www.electronjs.org/docs/api/frameless-window#limitations

模糊滤镜仅适用于网页，因此无法 对窗口下方的内容应用模糊效果(即其他 在用户系统上打开的应用程序)。

Answer 3

Electron不允许你模糊它后面运行的任何内容。它只允许您模糊网页/应用程序上的内容。css 样式中的任何内容将仅应用于前台内容。我知道，因为我也尝试过，但失败了。