saber 酱的抱枕

Fly me to the moon

09/26
2018
软件

用 background 扩展给 VS Code 设置背景图片

用 background 扩展给 VS Code 设置背景图片

今天发现 VS Code 可以用 background 扩展来设置背景图片。

安装这个扩展,然后重新启动 VS Code,就会看到编辑器右下角有一个魔理沙,这是扩展自带的默认背景图。

用 background 扩展给 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

用 background 扩展给 VS Code 设置背景图片