说实话，VSCode 已经是我每天打开时间最长的软件，没有之一。但你再喜欢一个编辑器，盯着同一块默认的灰蓝色界面看久了，也会觉得少了点什么。那段时间我把主题、字体、文件图标都折腾了一遍，接下来自然就盯上了背景图。很多人一开始都会问我：VSCode 的"背景图"选项到底藏在哪里？这里直接给出结论——官方设置里没有这个选项，不是你没找到，是真的没有。官方把"换背景"这个需求完全留给了社区，所以市面上才有各种插件和 CSS 注入方案。我前后把主流方案都试了一遍，最后沉淀下来三个真正靠得住、适合不同人群的做法。这篇文章会把这三种方法一次讲透：原理是什么、具体怎么配置、参数怎么填、会遇到哪些坑、出问题后怎么恢复。不管你刚装好 VSCode 还是在折腾 C++ 或 Python 环境，只要你希望编辑器看起来顺眼一点，都能从里面找到适合你的那条路。
1. 动手之前，先搞清楚 VSCode 为什么不肯给你背景图开关
1.1 VSCode 的界面，本质上是一个浏览器窗口
先花一分钟理解这件事：VSCode 基于 Electron 开发，整个界面就是一个由 Chromium 渲染的网页。字体、颜色、边框、阴影，在底层全都是 CSS 规则，背景图也不例外。理论上给某个容器加一条background-image就能实现换背景，技术上并没有任何难度。但官方为什么一直不出这个功能？
我的理解是，背景图会带来三个副作用。
第一个副作用是干扰阅读。代码编辑器讲究对比度，背景图一加，文字和背景之间的对比关系就不可控了，尤其遇到壁纸亮度高的区域，代码直接看不清。
第二个副作用是性能开销。高分辨率图片会占额外内存，如果还开了模糊特效，GPU 的负载也跟着上去。
第三个副作用是无障碍问题。你有没有想过，全屏背景图对视力不好的用户意味着什么？背景一变，整个界面层次都会乱掉。官方不在默认设置里提供背景图开关，更有可能是在规避这些不可控因素，而不是单纯"没空做"。
1.2 三个方向，本质都是"让 VSCode 加载你的自定义 CSS"
既然官方不开放入口，所有换背景的方案其实都绕不开一件事：想办法让 VSCode 的界面加载你自定义的 CSS。只要理解了这一点，后面所有操作都不会懵。
所以三条路线就非常清晰了：
- 方案一是装一个社区插件，让插件替你完成 CSS 注入，你只需要在设置界面里填图片路径、调调透明度。
- 方案二是用一个叫 Custom CSS and JS Loader 的插件，把你手写的 CSS 文件合并进 VSCode 的启动流程，自由度最高，能改的不只是背景。
- 方案三是绕开插件体系，直接修改 VSCode 安装目录里的静态样式文件，把默认样式整个改掉。
三条路线对应的门槛、自由度和维护成本完全不同，我先把对比表放在这里，方便你对号入座：
| 方案 | 上手成本 | 自由度 | 升级维护 | 适合人群 |
|---|---|---|---|---|
| 插件 | 低 | 中 | 基本无 | 想花五分钟看到效果的新手 |
| CSS 加载器注入 | 中 | 高 | 每次 VSCode 大版本升级后需重新执行一次命令 | 想长期深度定制 UI 的人 |
| 修改安装目录样式文件 | 较高 | 最高 | 升级即被覆盖，还可能有损坏提示 | 离线内网环境、想彻底理解原理的人 |
无论你最后选哪种，我都建议先做一件事：打开设置文件备份一下。快捷键 Ctrl+Shift+P，输入Open User Settings JSON，把弹出的这个 settings.json 内容复制一份存到别处。后面不管是配置写错还是想恢复默认，这个文件是你最快的回滚点。
2. 方法一：背景插件，五分钟看到效果
2.1 我实际用过的两个背景插件
第一类方案最简单：装插件。这里有两个常被提到的插件，我都用过，客观说一下区别。
一个是 background-cover（作者 xavier-loubert）。它带一个相对完整的设置项，支持填本地图片路径或图片 URL，可以调透明度、模糊度，还支持多图轮播，算是背景插件里功能最全的。
另一个是 vscode-background（插件 ID 是 shalldie.background）。它更轻量，主要就是固定背景图和图片轮播两件事，界面也朴素。
如果让我推荐，第一次尝试的人优先用 background-cover，因为它的配置项命名更直白，不容易踩坑。vscode-background 适合那种"我只要一张图别的都不想管"的场景。
2.2 background-cover 的具体配置步骤
第一步，打开扩展面板，快捷键 Ctrl+Shift+X，搜索 Background Cover，安装。
第二步，打开 settings.json（快捷键 Ctrl+Shift+P，输入 Open User Settings JSON），添加如下配置：
{ "background-cover.enable": true, "background-cover.customImage": "D:/Wallpapers/desk.jpg", "background-cover.opacity": 0.3, "background-cover.blur": 0, "background-cover.random": false }这里有几个参数值得单独说明一下：
| 配置项 | 作用 | 建议值 |
|---|---|---|
| background-cover.enable | 总开关 | true |
| background-cover.customImage | 背景图片路径，支持本地和 http(s) 链接 | 正斜杠路径，如 D:/Wallpapers/desk.jpg |
| background-cover.opacity | 背景图不透明度 | 0.2 - 0.35 之间比较合适 |
| background-cover.blur | 模糊程度，值越大越糊 | 0 或 1，尽量避免大值 |
| background-cover.random | 是否从多张图中随机切换 | false |
路径这个大坑我必须提前说：图片路径一定要用正斜杠。Windows 用户默认习惯写成D:\Wallpapers\desk.jpg，但 JSON 里反斜杠会被当成转义字符，轻则图片加载不出来，重则整个 settings.json 语法报错。我见过太多次这个问题了，统一用D:/Wallpapers/desk.jpg这种写法就不会错。
第三步，Ctrl+Shift+P，执行 Reload Window，让配置生效。这一步漏掉的话，你会以为插件没工作，其实它只是在等你重载窗口。
2.3 方法一的边界在哪里
背景插件最大的价值是省心，但它的上限也很明显。
首先，它是整块工作区统一加背景，侧边栏、底栏、编辑器区全都被同一张图盖住，你没法单独设置"只有编辑器区域显示背景"或者"侧边栏不显示背景"。
其次，可调参数基本就透明度、模糊度那几项。如果你想把背景图裁剪成某个区域、让它固定在一个角落里，插件方案做不到。
另外还有一个你可能会遇到的情况：背景插件和某些高亮主题配合时，界面整体会显得花。解决办法不是换主题，而是把 opacity 调到 0.2 以下，让背景只保留一层"氛围感"，而不是真的完全透出来。
如果你只想要一张安静的壁纸，到这里就足够了。但如果你的需求更细，比如"背景图只在右下角出现很小一张"，那就得升级到第二种方案。
3. 方法二：Custom CSS and JS Loader，自由度最高的长期方案
3.1 这个插件到底帮你做了什么
方法二的核心是安装 be5invis.vscode-custom-css，一个加载器插件。需要注意，它和直接改安装目录的方案有本质区别——它是在 VSCode 启动时，自动把你指定的 CSS/JS 文件内容合并进样式表，你不需要手动去动安装目录里的任何文件。
我打个比方：方法三是你直接去拆机器，把原厂零件换掉；方法二则是你在机器外面装了一个"外挂盒子"，每次点火时外挂盒子自动把你要的配件安上去。所以 VSCode 升级后，方法三改过的文件会被系统还原，而方法二只需要重新触发一次合并命令就能恢复效果。
这也是我最终长期使用方案二的原因。它能做的事情远不止背景图：滚动条样式、活动栏配色、标题栏高度、编辑器光标颜色，理论上所有界面元素都可以用 CSS 改。
3.2 完整配置步骤
第一步，扩展面板搜索 Custom CSS and JS Loader，安装（插件 ID：be5invis.vscode-custom-css）。
第二步，在 settings.json 中增加一个配置项：
{ "vscode_custom_css.imports": [ "file:///D:/vscode-custom/custom.css" ] }这个路径就是你自己定义的 CSS 文件位置。注意前缀必须写成file:///，后面是绝对路径，这是又一个容易犯错的点。Windows 下正确的写法是file:///D:/vscode-custom/custom.css，三根斜杠，少一根都不行。
第三步，创建这个 CSS 文件，里面写你的自定义样式。
第四步，Ctrl+Shift+P，执行命令Reload Custom CSS and JS，执行完 VSCode 会提示你必须重启才能完全生效，手动重启一次即可。
3.3 我常用的三套 CSS 模板，直接抄
先来最基础的全窗口背景：
body { background-image: url('file:///D:/pics/wall.jpg') !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }这套样式只是给整个界面加了一张背景，但你会发现背景被编辑器区域盖住了。原因很简单：编辑器的 DOM 容器有不透明的底色。所以还要把编辑器区域改成透明：
.monaco-workbench .part.editor>.content { background: transparent !important; } .monaco-workbench .part.editor>.content .editor-group-container>.split-view-container { background: transparent !important; } .monaco-editor, .monaco-editor-background, .monaco-editor .margin { background-color: transparent !important; }看到没？CSS 注入的自由度高就高在这里。你可以精确控制到"哪一层透明、哪一层保留底色"，而不是像插件那样一刀切。
再分享一个我最近很喜欢的方案：只在右小角放一个小图，不打扰代码阅读：
body { background-image: url('file:///D:/pics/logo.png') !important; background-size: 180px auto !important; background-position: right bottom !important; background-repeat: no-repeat !important; } .monaco-workbench .part.editor>.content { background: transparent !important; } .monaco-workbench .part.editor>.content .editor-group-container>.split-view-container { background: transparent !important; } .monaco-editor, .monaco-editor-background, .monaco-editor .margin { background-color: rgba(24, 24, 24, 0.96) !important; }注意最后一行，我用了一个接近不透明的 rgba 背景色，而不是完全透明。这就是方法二的精髓：你不一定要把编辑器变得完全透明，完全可以保留 96% 的底色，只留一点点透出背景的"呼吸感"，既美观又不影响读代码。
3.4 这个方法一定会遇到的坑
方法二最典型的坑是：VSCode 每次大版本升级后，自定义样式失效。
原因在于 VSCode 升级后会重建 workbench 相关文件，加载器插件需要重新把自定义 CSS 合并进去。解决办法非常固定：重新执行一次Reload Custom CSS and JS命令，重启即可。这不是 BUG，是整个机制的一部分，习惯就好了。
还有一个你可能会遇到的提示：插件运行时可能会弹出类似 "VSCode is modified" 的警告，问你是否允许修改。这是加载器在尝试给安装目录文件打补丁，属于正常行为，点允许即可。如果你用的 VSCode 是公司 IT 强制锁定安装目录的版本，这个方法可能直接被拦截，那就只能看方法三了。
4. 方法三：直接改安装目录里的样式文件，硬核但有代价
4.1 这条路到底在做什么
方法三是最"原教旨"的做法：不依赖任何插件，直接修改 VSCode 安装目录下的静态样式文件，让默认样式从源头上改变。
理解这个方法不需要多高深的知识。VSCode 界面既然是网页渲染的，那它的样式文件自然也存在安装目录下。老版本 VSCode 的样式集中在workbench.desktop.main.css文件里，新版本大量样式被内联进了workbench.desktop.main.js。无论哪个文件，思路都一样：找到它，改掉它，重启 VSCode，界面就变了。
4.2 完整操作步骤
以 Windows 为例。先找到 VSCode 安装目录下的 workbench 文件夹，路径一般是：
C:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench进去之后先做备份。把文件夹里的workbench.desktop.main.css（新版本可能是workbench.desktop.main.js）复制一份到别的目录，并改名，例如workbench.desktop.main.css.bak。这一步一定不能省，改错了能不能找回全指望它。
然后打开 CSS 文件，在文件末尾追加一段样式：
body { background-image: url('file:///D:/Wallpapers/bg.jpg') !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }如果你用的版本是 JS 文件为主，样式写法的逻辑其实一样，只是追加的位置是它内部某个 CSS 字符串里。操作难度会高一些，普通用户我不建议硬来。
Linux 和 macOS 的路径也很好找，分别是：
/usr/share/code/resources/app/out/vs/workbench /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench保存后重启 VSCode，背景就出来了。
4.3 新版本的两个拦路虎：完整性校验和自动升级
很多人以为方法三是最简单的"一劳永逸"，其实是三个方法里最需要警惕的。
第一，新版本 VSCode 做了文件完整性校验。你改了安装目录文件之后，启动时大概率会看到 "Code installation is corrupt" 的提示。这个提示不影响使用，但每次启动都弹，非常恼人。
第二，自动升级会覆盖修改。VSCode 一更新，你改过的 CSS 就全没了，得重新来一遍。如果非要用这个方法，建议去设置里把自动更新关掉，但前提是你公司没有用策略锁死更新行为。
那方法三还有存在价值吗？有，而且很重要。它适合内网、离线、插件市场不可用的环境。那种环境里插件装不了，加载器也使不上劲，直接改安装目录反而成了唯一能用的办法。只要你有备份，风险可控。
另外我多说一句：如果你懂一点前端，完全可以用 Node.js 脚本自己在启动时完成替换，原理和加载器插件一样。但这个工作量对普通人来说没有意义，核心思路你能理解就够了。
5. 三种方案到底怎么选，我给出一个判断标准
5.1 先看这张对比表
我根据实际体验整理了三种方法的核心差异：
| 维度 | 方法一：插件 | 方法二：CSS 加载器 | 方法三：改安装目录 |
|---|---|---|---|
| 配置难度 | 低 | 中 | 中高 |
| 背景可控精细度 | 低 | 高 | 高 |
| 是否支持代码级自定义 | 否 | 是 | 是 |
| VSCode 升级影响 | 基本无 | 需重新执行一次命令 | 全部失效，需重新操作 |
| 启动损坏提示 | 无 | 无 | 新版本可能有 |
| 最适合场景 | 新手快速换壁纸 | 长期定制 UI | 离线内网环境 |
5.2 我的实际选型经验
我从方法一入的门，用了两天就换到了方法二，倒不是方法一不好，而是我发现自己对"透明度"和"背景位置"这两个细节的要求，插件满足不了。
打个比方，方法一像是给你一个调好的滤镜，一键套用；方法二则是给你一套画笔，想往哪画往哪画。如果你只是想让编辑器看起来不一样，图个新鲜，方法一完全够。但如果你和我一样，会因为"侧边栏颜色和背景图不搭"这种细节难受好几天，那就直接上方法二。
方法三我是在一台内网电脑上被迫用的。那台机器装不了插件，我只能手动改安装目录的样式文件。效果能用，背景图也正常显示，但后来 VSCode 升级过一次，我的改动全没了，又得重来。所以除非你的环境真的装不了插件，否则我不建议日常使用。
6. 高频踩坑清单：路径、透明度、失效与恢复
6.1 图片路径的常见错误
我帮别人排查过太多次背景不显示的问题，十有八九是路径写错。最常见的三个错误是：
| 错误写法 | 问题原因 | 正确写法 |
|---|---|---|
| D:\Wallpapers\bg.jpg | 反斜杠在 JSON 里是转义字符 | D:/Wallpapers/bg.jpg |
| file://D:/... | 少了一根斜杠，URI 无法识别 | file:///D:/... |
| 路径中存在中文文件名 | 部分版本对中文路径兼容性差 | 图片改名成纯英文 |
另外，图片建议放在一个不会经常变动的目录里。很多人把壁纸放在下载目录，哪天手滑清空了下载文件夹，VSCode 背景就悄悄没了。
6.2 配置了没生效？先检查这一步
大多数背景插件和 CSS 加载器，都要求你执行一次"重新加载窗口"的操作。这是最容易被忽略的步骤。插件装好后，不会像浏览器那样自动刷新页面；VSCode 需要你手动重启渲染进程。
通用操作是 Ctrl+Shift+P，输入 Reload Window，回车。方法二的 Custom CSS and JS Loader 则需要执行 Reload Custom CSS and JS，再重启整个 VSCode。
6.3 文字看不清和界面卡顿的处理
背景图好看归好看，但如果代码都看不清，那就是本末倒置。我的处理优先级是：
- 先调低背景透明度，通常 0.2 到 0.35 之间是比较安全的区间。
- 如果还是影响阅读，给背景加一层深色遮罩。方法二里可以直接在 CSS 上用
rgba模拟遮罩层。 - 换低饱和度的壁纸。太鲜艳的图天生不适合做代码编辑器背景。
- 卡顿的话，检查图片体积。别用 10MB 以上的 PNG，压缩成 JPG 或 WebP，分辨率控制在 1920x1080 或者 2560x1440 就足够了。
6.4 如何干净地恢复默认背景
这个我必须写清楚，因为不少人改完就后悔了。
方法一：直接卸载背景插件，然后执行 Reload Window。如果只是暂时不想要，禁用插件也行。
方法二：把vscode_custom_css.imports配置项清空，然后执行Reload Custom CSS and JS并重启。注意清空 imports 之前，最好保留一份自定义 CSS 文件副本，说不定以后还用得上。
方法三：把当初备份的workbench.desktop.main.css或workbench.desktop.main.js覆盖回安装目录，重启 VSCode。如果当初没备份，那就只能重装 VSCode 了。
6.5 一个极简替代思路：用渐变代替图片
最后再分享一个思路。如果你不想用图片，又想让界面不那么单调，可以让背景变成一组渐变色：
body { background-image: linear-gradient(135deg, #1e1e2e 0%, #2d2a32 100%) !important; background-attachment: fixed !important; }这个玩法没有版权问题，不消耗大图片内存，也不会干扰代码阅读。适合那些嘴上说"想要背景图"，实际试完图片背景后觉得太花、又退回纯色界面的朋友。
我现在的日常配置，就是方法二的方案：侧边栏用极浅的底色，编辑器区保留 96% 的纯色背景，只在右下角放一张 180px 的小图。这个小图不挡代码，还能在切窗口时给我一点视觉锚点，比全屏壁纸实用得多。如果你们也准备折腾，我建议从方法一开始，先享受那种"五分钟就换好背景"的成就感；等发现细节不够用，再往方法二迁移。方法三就当作理解原理的课后作业吧，除非你所在的环境真的装不了任何插件。最后提醒一句，无论用哪种方法，动手前先备份 settings.json，这是我能给的最实在的建议。
