如何模糊具有透明度的电子 BrowserWindow

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 标签的正文，其中包含文本。
尽管这只会在 window 中创建黑色背景。

我读到了一些关于这个的内容：

webPreferences: {
    experimentalFeatures: true
}

但无法正常工作。

环境

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

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

提前致谢！

Answer 1

无法在后台对其他应用进行模糊处理。 https://www.electronjs.org/docs/api/frameless-window#limitations

The blur filter only applies to the web page, so there is no way to apply blur effect to the content below the window (i.e. other applications open on the user's system).

Answer 2

Electron 不允许您模糊其背后的任何东西运行。它只允许您模糊 webpage/app 上的内容。 css 样式中的任何内容都只会应用于前景内容。我知道，因为我也尝试过但失败了。

Answer 3

electron-acrylic-window

实际上，只要一点点魔法，这是可能的。我不知道为什么没有人指出这一点，但是有一个名为 electron-acrylic-window 的小实用程序可以让您做到这一点。您可以在亚克力（“磨砂”）和模糊效果之间进行选择，还可以更改 window 的颜色和不透明度。

在后台，它使用 node-gyp 和 low-level 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;
}

如何模糊具有透明度的电子 BrowserWindow

How do I blur an electron BrowserWindow with transparency

css

node.js

electron

transparent

blur

问题

例子

环境

electron-acrylic-window

示例用法