记录electron创建透明窗口不生效的解决方式

最新推荐文章于 2025-09-10 03:21:20 发布

原创最新推荐文章于 2025-09-10 03:21:20 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#electron #html #前端

项目开发中，在Electron里创建透明窗口，设置窗口transparent属性为true未生效。经尝试发现是窗口加载页面不透明所致。解决办法是在设置好窗口透明属性后，将窗口要加载页面的body、html或根元素的background设为transparent。

问题：项目开发需要创建一个透明窗口，在创建窗口实例的时候，设置窗口的transparent属性为true（如下设置），但是并没有使窗口透明。

mainWindow = new BrowserWindow({
    width: 1038,
    height: height,
    transparent: true, // 设置窗口透明
    frame: false, // 要创建无边框窗口
    movable: false, // 窗口是否可以移动
    show: false, // 先不让窗口显示
    modal: true,
    skipTaskbar:true,
    alwaysOnTop: true,
    resizable: false,
    parent: null,
    webPreferences: {
      devTools: false,
      enableRemoteModule:true,
      nodeIntegration: true,
      contextIsolation: false,
      webSecurity: false, // 目的是为了开发环境能正常加载资源
    },
  });

查了别人实现透明窗口的方式，尝试过设置 backgroundColor为透明，opacity为透明（事实上这个属性直接让整个窗口相当于隐藏状态），最后多次尝试下，发现不是窗口设置透明效果没有生效，而是窗口加载的页面不是透明的（在打开窗口的瞬间，窗口背景先是透明的，但是等页面加载好就变成了白色背景，所以得此结论）。

解决：该设置透明的属性设置好，要是出现类似上面情况的，可以考虑把窗口要加载的页面，它的body或者html或者根元素设置background为transparent。