【VSCode】设置背景图片

1.下载background插件:拓展程序→background→install安装→设置:

2.点击在 settings.json 中编辑:

3.将settings.json文件中所有代码注释,添加以下代码:

js 复制代码
{
    // 是否开启背景图显示
    "background.enabled": true,
    // true-显示默认的图片  false-显示用户自定义的图片
    "background.useDefault": false,
    // 最多设置三张图片,默认显示最上方的图片,当打开多个侧边栏时再依次显示后面的背景图片
    "background.customImages": [
        "file:///C:/Users/admin/Pictures/Camera Roll/1.jpg",
        "file:///C:/Users/admin/Pictures/Camera Roll/2.jpg",
        "file:///C:/Users/admin/Pictures/Camera Roll/3.jpg"
    ],
    // CSS显示样式设置
    "background.style": {
        "content": "''",
        "pointer-events": "none",
        "top": "0",
        "left": "0",
        "width": "100%",
        "height": "100%",
        "z-index": "99999",
        "background.repeat": "no-repeat",
        "background-size": "cover",
        // 设置透明度
        "opacity": 0.2
    },
    "editor.minimap.enabled": false,
}

4.将原代码注释后,加入以下代码。注意修改图片路径。

json 复制代码
{
   // 是否开启背景图显示
   "background.enabled": true,
   // true-显示默认的图片  false-显示用户自定义的图片
   "background.useDefault": false,
   // 最多设置三张图片,默认显示最上方的图片,当打开多个侧边栏时再依次显示后面的背景图片
   "background.customImages": [
       "file:///D:/Work/Image1/阿尼亚1.jpg",
       "file:///D:/Work/Image1/阿尼亚2.jpg",
       "file:///D:/Work/Image1/阿尼亚3.jpg"
   ],
   // CSS显示样式设置
   "background.style": {
       "content": "''",
       "pointer-events": "none",
       "top": "0",
       "left": "0",
       "width": "100%",
       "height": "100%",
       "z-index": "99999",
       "background.repeat": "no-repeat",
       "background-size": "cover",
       // 设置透明度
       "opacity": 0.2
   },
   "editor.minimap.enabled": false,
}

5.保存后重启 VSCode 即可。

6.切换主题颜色:设置→颜色主题→通过上下键选择自己喜欢的主题颜色。

相关推荐
FungLeo15 小时前
成为全栈·Vue 管理后台篇·编辑器图片上传:从文件选择到文章附件关联
前端·vue.js·编辑器·markdown·文件上传·formdata·附件管理
拼图2092 天前
VSCode 正则表达式使用指南
ide·vscode·正则表达式
#六脉神剑3 天前
myBuilder 11 月新版本:AI辅助设计
ide·人工智能·低代码·ai·mybuilder
小李不困还能学3 天前
VSCode_RemoteSSH_一直卡在下载服务器_解决教程
服务器·ide·vscode
caoliaoerweima3 天前
草料二维码小程序上线活码编辑器:手机上也能编辑活码了
智能手机·小程序·编辑器·草料二维码
慧都产品智能化4 天前
Qt 表格升级攻略:复用已有编辑器,减少重复开发
c++·qt·编辑器·qt6.3
独隅4 天前
WebStorm macOS 安装部署与高效调优完全指南
ide·macos·webstorm
独隅4 天前
WebStorm macOS 安装调优与实战效能全景
ide·macos·webstorm
DFT计算杂谈4 天前
可DIY布里渊区图像绘制编辑器
人工智能·机器学习·语言模型·矩阵·编辑器
独隅4 天前
WebStorm Linux 版安装实战与核心效能展示
linux·ide·webstorm