Electron如何实现类似macOS Finder的区域半透明窗口效果

完全可以实现仅指定区域半透明的效果，不需要把整个窗口设为半透明，具体操作步骤如下：

1. 主窗口基础配置 #

创建BrowserWindow时将窗口背景设为完全透明，不要直接给窗口设置opacity属性，避免所有元素都继承半透效果，配置示例：

const { BrowserWindow } = require('electron')
const mainWindow = new BrowserWindow({
  width: 900,
  height: 600,
  titleBarStyle: 'hiddenInset', // macOS下适配原生风格的内嵌标题栏
  transparent: true,
  frame: false,
  backgroundColor: '#00000000', // 窗口背景完全透明
  webPreferences: {
    contextIsolation: false,
    nodeIntegration: true
  }
})

2. 页面布局拆分 #

页面采用flex布局拆分为侧边栏、主内容区两个部分，分别设置不同的背景样式即可：

• 侧边栏：设置不透明纯色背景即可，示例样式：

.sidebar {
  width: 240px;
  height: 100vh;
  background: #f5f5f7; /* 完全不透明背景 */
  border-right: 1px solid #e0e0e0;
}

• 主内容区域：如果只需要普通半透效果，直接设置带alpha通道的背景色即可；如果需要和Finder一致的毛玻璃半透效果，加上backdrop-filter模糊即可，示例样式：

.main-content {
  flex: 1;
  height: 100vh;
  /* 普通半透效果 */
  /* background: rgba(255, 255, 255, 0.7); */
  /* 毛玻璃半透效果，和Finder风格一致 */
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

效果参考 #

注意事项 #

• 不要给全局容器设置pointer-events: none，避免窗口交互失效，只有不需要响应点击的透明区域才需要设置该属性
• Electron 15+版本对backdrop-filter的兼容性已经覆盖Windows、macOS双平台，无需额外适配
• 如果你需要更贴合原生系统的视觉效果，macOS下也可以搭配Electron的vibrancy API使用，调整对应模糊材质参数即可

内容的提问来源于stack exchange，提问作者Marco