Electerm 终端背景：图片、文字与五个滤镜

终端就是一块矩形的文字，用上几千小时之后，它确实有点无聊。Electerm 允许你在它背后放点东西：一张照片、一个网络图片链接、你自己写的一段文字，或者仅仅是会话序号——然后用五个滤镜把它调暗，保证前面的输出依然看得清。

关键在于它不做什么。这不是窗口透明度，也不是终端主题的背景色。图片是画在文字背后的，文字本身的亮度一点都不损失——正因如此它可以整天开着，而窗口半透明不行。

设置在哪里

设置 → 终端 → 终端背景图片。

它是一个带文件选择按钮（选择文件）的文本框，可以接受四类值：

填入的内容	效果
路径，如 /home/you/Pictures/dusk.jpg	从磁盘读取这张图片
链接，如 https://example.com/dusk.jpg	从网络加载这张图片
[🚫]	不要背景图
[📝]	你自己写的文字，居中绘制
留空（默认）	electerm 自带的水印
Index / 🎨 RandomShape	会话序号 / 随机生成的图案——仅全局设置可用

同一个字段在书签表单里也有，所以你可以给某一台主机单独设一张壁纸，其余主机沿用你的。这个下面会单独讲，因为它在两处行为不一样，很容易踩坑。

五个滤镜

当值是真实图片时，下方会出现五个数字输入框。它们不是滑块，而是 antd 的数字输入框，标签直接写进字段里，所以每个显示为 Opacity: 1、Blur: 0 这样。

字段	默认值	范围	步长
Opacity	1	0 – 1	0.05
Blur	0	0 – 50	0.5
Brightness	1	0 – 10	0.1
Grayscale	0	0 – 1	0.05
Contrast	1	0 – 10	0.1

它们会被拼成一条 CSS filter 链，顺序就是上面这个顺序：

filter: blur(6px) opacity(0.45) brightness(0.9) contrast(1.1) grayscale(0.6);

默认值全部是"无操作"，这一点很对：放一张图进去就是原样渲染，只有当图片在 kubectl get pods 背后实在太吵时你才需要动滤镜。

两个实用配方：

• 图片很亮。 Opacity: 0.35、Grayscale: 0.5，别的都不用改。图片变成一层质感，而你的绿字红字依然保留含义。
• 图片很花。 Blur: 12、Opacity: 0.5。模糊是唯一能明确提升可读性的滤镜，因为它抹掉了和字形边缘抢注意力的高频细节。

注意当值为 [🚫]、Index 或 [📝] 时，这五个字段会从面板上消失——没有东西可作用。这是有意为之，不是渲染故障。

每种内置模式实际画了什么

默认（值为空）。 Electerm 会画上自己的水印——images/electerm-watermark.png，766 × 266——在每一个布局分屏的当前会话背后。尺寸是 min(100%, 766px) auto，所以它保持宽高比，在窄的分屏列里会缩小而不是被两边裁掉。如果你从没设过背景图，你一直看到的就是它。

[🚫] 无背景。 水印那条规则根本不会生成，同时会话级规则会显式写入 background-image: none——之所以要显式写，是因为书签级的 [🚫] 必须压过全局图片，空规则会让它透出来。如果你觉得水印碍眼又不想要替代品，就选它。

[📝] 文字。 会弹出一个对话框：文字内容（最多 500 字符）、字号（12–200，默认 48）、颜色（默认 #ffffff）、字体（默认 Maple Mono）。它居中绘制在面板里，保留换行，opacity: 0.3。一个词比如 PRODUCTION 放在 120px 是非常好的警示牌；一整段话就不行，因为行高和折行不归你控制。

Index。 把会话的标签序号画成背景——就是标签栏那个小圆角块里的数字——opacity: 0.1、font-size: 30vmin、加粗。四宫格布局里，窗口管理器把你的面板打乱之后，这是最快分辨谁是谁的办法。

🎨 RandomShape。 渲染时现场生成一张 200 × 200 的 canvas，当作 data URL 使用。里面有八种图案生成器——流体动力学、量子波、相对论场、流体流、粒子物理、波的干涉、弦论、量子场——随机选一种，再随机一个色相、饱和度、亮度。由此带来两件事：

• 它每次重写 CSS 都会重新生成，所以你一改背景相关的任何设置它就变了（而且分屏里每个面板各拿一份，不是共用一个图案）。
• 基础规则是 background-repeat: no-repeat，用户图片分支又设了 background-size: auto，所以这张 200 × 200 的 canvas 是在面板正中放一块，而不是铺满。

它是怎么渲染的（值得知道的部分）

理解了机制，大部分意外就都能解释了，所以值得花三段。

xterm 拿到的是一个透明的终端背景——background: 'rgba(0,0,0,0)'——同时 .xterm 和 .xterm-viewport 也被强制透明。然后 electerm 往页面里注入自己的样式表，把你的图片画在 .xterm-screen::before 上：绝对定位、铺满、z-index: -1，于是它位于文字之后、面板自身背景之前。整个戏法就这一句。你的文字永远不会变暗，因为没有任何东西在压它。

本地文件通过 IPC 读取后内联成 data URL，所以 file:// 路径不会出现在 DOM 里；链接则原样使用。又因为 xterm 以为背景是透明的，它算出来的选区颜色会是"在透明黑上混合"的结果，因而是错的——所以 electerm 会基于真实可见背景重算选区颜色。你配置的不透明选区颜色，依然是不透明的。

有两个后果可以从外部观察到：

• 向终端查询背景色的 shell 拿到的是界面色。 OSC 11（\e]11;?\a）的回答用的是主题的界面 main 色，而不是终端调色板的背景色——因为终端调色板的背景正是被藏起来的那个东西。这是 #4407 修掉的：浅色界面主题下，查询背景色的 TUI 程序拿到了错误的颜色。
• WebGL 渲染器会把图片盖住。 设置 → 终端 → 渲染类型 里有 dom 和 webGL 两个选项。dom 是默认值，也是背景图能用的那一个。切到 webGL 时，electerm 交给 xterm 的是不透明背景而非透明背景，而 xterm 的 WebGL 插件没有透明选项——它的 canvas 会画出一整块不透明的矩形盖在 CSS 层上。我拿同一份 DOM 分别渲染了两种情况验证过：dom 下图片可见，webGL 下被完全盖住。如果你的背景图"不起作用"，先查这个设置。

书签级背景，以及那个坑

打开一个书签，翻到 终端背景图片。字段是同一个，但下拉选项只有 默认、[🚫] 和 [📝]——Index 和 🎨 RandomShape 只有全局设置里有，因为它们需要知道整个标签集合的情况。

坑在这里：保存书签时，如果图片路径为空，electerm 会把整个背景配置块删掉。所以书签级的"纯文字"背景——[📝] 但不带图片——会在保存时被悄悄丢弃。你必须设一个图片路径，这个配置块才会留下来。想让所有会话都用文字背景，就设全局。

另一件要知道的事是两级怎么合并。书签级的值优先——但有个小毛病。保存下来的书签会带上全部十个背景属性，你没动过的那些用应用默认值补齐，而合并时是逐属性做真值判断的。所以书签里值为 0 的属性会被当成"没设置"，全局值反而赢了。实际结果就是：Blur 和 Grayscale 会从全局设置漏进来（它们的默认值是 0），而 Opacity、Brightness、Contrast 不会（默认值是 1，为真）。想让书签级滤镜行为可预期，要么把全局的 Blur、Grayscale 留在 0，要么在每个书签里把五个值都显式设一遍。

有一半标签根本没做翻译

知道这一点，你就不会以为自己装坏了。这个功能用到的字符串里有十个不在语言包里——英文没有，中文也没有，任何语言都没有：

textBackground  index  randomShape  Opacity  Blur
Brightness  Grayscale  Contrast  terminalBackgroundText  enterTextForBackground

Electerm 的翻译查询在找不到时会回退成键名本身，并把首字母大写。所以下拉菜单里真的显示 📝 TextBackground、Index、🎨 RandomShape，滤镜字段也真的显示 Opacity、Blur、Brightness、Grayscale、Contrast——在任何语言下都是英文，包括中文界面。这些键从来没有被加进 @electerm/electerm-locales。

速查

• 设置位置： 设置 → 终端 → 终端背景图片；书签表单里也有同名一项。
• 取值： 文件路径、https:// 链接、[🚫]（无）、[📝]（文字）、Index 或 🎨 RandomShape（仅全局），留空则是水印。
• 滤镜： Opacity 0–1、Blur 0–50、Brightness 0–10、Grayscale 0–1、Contrast 0–10——拼成一条 CSS filter 链，在 [🚫] / Index / [📝] 下隐藏。
• 文字背景： 居中、opacity: 0.3、字号 12–200、默认字体 Maple Mono。
• 想要背景图就不要把 渲染类型 设成 webGL——canvas 会把它盖住。
• 书签级的纯文字背景会在保存时被丢弃。 要么设图片路径，要么把文字设成全局。

延伸阅读：窗口透明度是让 electerm 变"透"的另一条路——它会把整个窗口连同文字一起淡化，和背景图是两种不同的取舍。主题编辑器讲的是终端调色板本身，而终端图像支持讲的是输出里出现图片（sixel、iTerm 内联图片），不是背后的图片。