Skip to main content

自定义窗口样式

¥Custom Window Styles

无框窗口​

¥Frameless windows

Frameless Window

无框架窗口会删除操作系统应用的所有 chrome，包括窗口控件。

¥A frameless window removes all chrome applied by the OS, including window controls.

要创建无框窗口，请将 BrowserWindow 构造函数中的 BaseWindowContructorOptions frame 参数设置为 false。

¥To create a frameless window, set the BaseWindowContructorOptions frame param in the BrowserWindow constructor to false.

docs/fiddles/features/window-customization/custom-window-styles/frameless-windows (34.0.0)Open in Fiddle
const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({
    width: 300,
    height: 200,
    frame: false
  })
  win.loadURL('https://example.com')
}

app.whenReady().then(() => {
  createWindow()
})

透明窗口​

¥Transparent windows

Transparent Window

Transparent Window in macOS Mission Control

要创建完全透明的窗口，请将 BrowserWindow 构造函数中的 BaseWindowContructorOptions transparent 参数设置为 true。

¥To create a fully transparent window, set the BaseWindowContructorOptions transparent param in the BrowserWindow constructor to true.

以下小提琴利用透明窗口和 CSS 样式来创建圆形窗口的幻觉。

¥The following fiddle takes advantage of a tranparent window and CSS styling to create the illusion of a circular window.

docs/fiddles/features/window-customization/custom-window-styles/transparent-windows (34.0.0)Open in Fiddle
const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({
    width: 100,
    height: 100,
    resizable: false,
    frame: false,
    transparent: true
  })
  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()
})

局限性​

¥Limitations

  • 你无法单击透明区域。详情请参见 #1335。

    ¥You cannot click through the transparent area. See #1335 for details.

  • 透明窗口不可调整大小。将 resizable 设置为 true 可能会使透明窗口在某些平台上停止工作。

    ¥Transparent windows are not resizable. Setting resizable to true may make a transparent window stop working on some platforms.

  • CSS blur() 过滤器仅适用于窗口的网页内容，因此无法对窗口下方的内容（即用户系统上打开的其他应用）应用模糊效果。

    ¥The CSS blur() filter only applies to the window's web contents, so there is no way to apply blur effect to the content below the window (i.e. other applications open on the user's system).

  • 打开 DevTools 时，窗口不会是透明的。

    ¥The window will not be transparent when DevTools is opened.

  • 在 Windows 上：

    ¥On Windows:

    • 禁用 DWM 时，透明窗口将不起作用。

      ¥Transparent windows will not work when DWM is disabled.

    • 无法使用 Windows 系统菜单或双击标题栏来最大化透明窗口。其背后的原因可以在 PR #28207 上看到。

      ¥Transparent windows can not be maximized using the Windows system menu or by double clicking the title bar. The reasoning behind this can be seen on PR #28207.

  • 在 macOS 上：

    ¥On macOS:

    • 原生窗口阴影不会显示在透明窗口上。

      ¥The native window shadow will not be shown on a transparent window.