自定义窗口样式
无边框窗口
A frameless window removes all chrome applied by the OS, including window controls.
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 (35.1.2)Open in Fiddle
- main.js
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()
})
透明窗口
To create a fully transparent window, set the BaseWindowContructorOptions transparent
param in the BrowserWindow
constructor to true
.
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 (35.1.2)Open in Fiddle
- main.js
- index.html
- styles.css
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()
})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
<link href="./styles.css" rel="stylesheet">
<title>Transparent Hello World</title>
</head>
<body>
<div class="white-circle">
<div>Hello World!</div>
</div>
</body>
</html>
body {
margin: 0;
padding: 0;
background-color: rgba(0, 0, 0, 0); /* Transparent background */
}
.white-circle {
width: 100px;
height: 100px;
background-color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
app-region: drag;
user-select: none;
}
局限性
- 你不能点击穿透透明区域。 更多细节参见 #1335。
- 透明窗口不可调整大小。 Setting
resizable
totrue
may make a transparent window stop working on some platforms. - CSS
blur()
选择器仅适用于网页,因此无法对位于透明窗口下方的内容应用模糊效果 (例如在用户系统上打开的其他应用程序) 。 - 当打开开发者工具时,窗口将不透明。
- On Windows:
- 当DWM禁用时,透明窗口将失效。
- 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.
- On macOS:
- 在 Mac 上, 原生窗口阴影不会显示在透明窗口中。