09/26
2018
今天发现 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。