今天发现 VS Code 可以用 background 扩展来设置背景图片。
安装这个扩展,然后重新启动 VS Code,就会看到编辑器右下角有一个魔理沙,这是扩展自带的默认背景图。
命令提示等面板变成了透明背景。
这个扩展支持设置 3 个背景图片,这样在编辑器显示为 2 列、3 列的时候可以显示不同的背景图片。
如何自定义:
首选项 → 设置 → 打开 settings.json,在规则里粘贴以下设置:
"background.useDefault": false,
"background.customImages": ["file:///D:/images/aaaa.jpg", "file:///D:/images/aaaa.jpg", "file:///D:/images/aaaa.jpg"],
"background.style": {
"content": "''",
"pointer-events": "none",
"position": "absolute",
"z-index": "99999",
"background-position": "center",
"background-repeat": "no-repeat",
"background-size": "cover",
"opacity": 0.12
}
保存并重启 VS Code 就可以看到效果了。
示例中的图片用的是本地路径,也可以使用 https 的网络图片,根据自己需要修改即可。底下的样式就是 css 样式了。
建议使用深色图片做背景图,以免影响阅读代码。我上面的第一张图就不恰当。也要避免过多的线条。
更多使用方式,可参阅该扩展的 GitHub。