电子在窗口中形成透明圆圈？答案

【问题标题】：Electron make transparent circle in window?电子在窗口中形成透明圆圈？
【发布时间】：2021-03-08 17:31:55
【问题描述】：

有什么方法可以使电子窗口的一部分透明？例如，移动移动的区域？

我的电子文件中有以下 sn-p：

const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    },
    transparent: true,
    frame: false,
    ...
  })

还有以下 CSS：

html, body {
  cursor: none;
  background-color: #121212;
}

.cursor {
  width: 40px;
  height: 40px;
  border: 2px solid #fefefe;
  border-radius: 100%;
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
}

当我禁用 html 的背景颜色时，一切都按预期工作，圆圈是透明的，窗口也是如此：

问题是当我显示背景颜色时，我可以通过光标后面的圆圈看到背景：

我正在尝试使窗口在跟随光标位置的那个圆圈内是透明的，这样我就可以通过光标跟随圆圈看到电子窗口后面的桌面。

【问题讨论】：

标签： javascript html css reactjs electron

【解决方案1】：

想通了！

原来我可以在光标圈周围使用box-shadow：

.cursor {
  width: 40px;
  height: 40px;
  border: 2px solid #fefefe;
  border-radius: 100%;
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 0 0 9999px rgba(0, 0, 255, 1);
}

感谢：Hole in overlay with CSS

【讨论】：