vs code不同项目显示不同的背景图

效果展示

项目1-图

{"background.enabled": true, "background.interval": 0,"background.customImages": ["file:///C:/Users/Administrator/Pictures/bg.png"],"background.style": {"background-position": "right top","background-size": "auto","opacity": 0.1}
}

重点提示：background.customImages

项目2-图

{"background.enabled": true, "background.interval": 0,"background.customImages": ["file:///C:/Users/Administrator/Pictures/289dd7752a294e7699619ad98cec2ab5.png"],"background.style": {"background-position": "right top","background-size": "auto","opacity": 0.1}
}

重点提示：background.customImages

项目3-图

{"background.enabled": false, "background.interval": 0,"background.customImages": ["file:///C:/Users/Administrator/Pictures/289dd7752a294e7699619ad98cec2ab5.png"],"background.style": {"background-position": "right top","background-size": "auto","opacity": 0.1}
}

重点提示："background.enabled": false,

使用工具

• 工具名称：background
• 工具项目地址：https://github.com/shalldie/vscode-background/blob/HEAD/README.zh-CN.md

解决方案

• 第1步：在每个项目的根目录新建一个.vscode文件夹；
• 第2步：在文件夹里新建一个settings.json文件

settings.json文件内容

{"background.enabled": false, "background.interval": 0,"background.customImages": ["file:///C:/Users/Administrator/Pictures/289dd7752a294e7699619ad98cec2ab5.png"],"background.style": {"background-position": "right top","background-size": "auto","opacity": 0.1}
}

settings.json文件内容解读

• background.enabled：是否开启背景设置。
• background.interval：单位秒，轮播时候图片切换间隔，默认 0 表示不开启。
• background.customImages：图片地址，这里是个数组为轮播的时候使用，我这里只使用一张。
• background.style：背景样式和CSS一样
• background-position：背景定位right top的意思是右上角
• background-size：背景图大小
• opacity：透明度,值为0.1至1

图片地址怎么获取

图片地址支持类型网址和file协议

["https://pathtoimage.png", "file:///path/to/local/file"]

本地图片可以拖到浏览器中，快速从地址栏得到file协议的地址

设置无效-请看

点击状态栏右下角「Background」按钮，可以快速弹出 background 所有命令：

或者输入background命令

然后，点击安装/激活插件，即可。

如何输入命令

在编辑器顶部中间位置有个输入框，如下图

输入>background，即弹出下拉菜单

延伸阅读

• vs code背景图设置
• vs code为不同项目设置不同的背景图