如何在Electron中实现加载GIF的透明启动窗口？

问题原因 #

直接加载GIF文件时，Electron会自动生成一个默认HTML页面包裹图片，这个默认页面的body背景是白色的，所以哪怕窗口设了transparent: true，底层的白色页面背景还是会透出来。

解决方案 #

步骤1：修改BrowserWindow配置

新增backgroundColor: '#00000000'参数，显式指定窗口初始化背景为完全透明，适配Windows系统的渲染逻辑：

const loadingWindow = new BrowserWindow({
  show: false,
  icon: require('./forge.config.js').packagerConfig.icon,
  width: 80,
  height: 80,
  frame: false,
  transparent: true,
  resizable: false,
  // 新增以下配置
  backgroundColor: '#00000000'
})

步骤2：使用透明背景的HTML承载GIF

不要直接用loadFile加载GIF文件，新建一个极简HTML文件（比如命名为loading.html），手动设置页面背景为透明：

<!DOCTYPE html>
<html style="background: transparent;">
<head>
  <style>
    * { margin: 0; padding: 0; }
    body {
      background: transparent;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  </style>
</head>
<body>
  <img src="./loading.gif" alt="加载中">
</body>
</html>

步骤3：修改加载逻辑

把原来的GIF加载逻辑改成加载新建的HTML文件：

loadingWindow.loadFile('loading.html')

补充说明 #

• 请确认Windows 10系统已开启透明度效果：打开系统设置→个性化→颜色，开启「透明度效果」开关，否则Electron的透明窗口配置不会生效。
• 如果不想新增单独的HTML文件，也可以用data URI的方式直接加载内嵌的HTML内容，不需要额外创建文件：

loadingWindow.loadURL(`data:text/html;charset=utf-8,
<!DOCTYPE html>
<html style="background: transparent;">
<head>
  <style>
    * { margin: 0; padding: 0; }
    body {
      background: transparent;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  </style>
</head>
<body>
  <img src="./loading.gif" alt="加载中">
</body>
</html>`)

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