css - 如何模糊具有透明度的 Electron BrowserWindow

Question

问题

是否有可能在 Electron 中制作一个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
})

样式.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
• Node :v10.15.3
• npm: 6.4.1
• i3wm。 4.14.1

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

提前致谢!

Answer 1

Electron 亚克力窗

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

在引擎盖下，它使用 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])

样式.css

body {
  background-color: transparent;
}

.watev {
  background-color: black;
}