VSCode 如何设置背景图片

VSCode 设置背景图片

1.打开应用商店,搜索 background ,选择第一个,点击安装。

2. 安装完成后点击设置,点击扩展设置。

3.点击在 settings.json 中编辑。

4.将原代码注释后,加入以下代码。

javascript 复制代码
// {
//     "workbench.iconTheme": "material-icon-theme",
//     "background.fullscreen": {
//         "image": "",
//         "opacity": 0.91,
//         "size": "cover",
//         "interval": 0
//     }
// }

{
    // 是否开启背景图显示
    "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,
}

5. 保存后重启 VSCode 就能看到设置的背景图片啦。

6.最后再点击设置,点击颜色主题,通过上下键选择自己喜欢的主题颜色。

原创作者:吴小糖

创作时间:2023.11.1

相关推荐
歪歪10013 小时前
Qt Creator 打包应用程序时经常会遇到各种问题
开发语言·c++·qt·架构·编辑器
战南诚16 小时前
前端开发vscode插件 - live server
ide·vscode·编辑器
周小码18 小时前
Gutenberg块编辑器:WordPress 2025高效内容开发指南
编辑器
墨抒颖 msy.plus18 小时前
[特殊字符] 从零到一:打造你的VSCode圈复杂度分析插件
ide·vscode·编辑器·插件·cursor
十子木21 小时前
vim 常用快捷键汇总
linux·编辑器·vim
EleganceJiaBao1 天前
【Neovim】Vi、Vim、Neovim 与 LazyVim:发展史
linux·编辑器·vim·vi·neovim·lazyvim
北冥有鱼被烹1 天前
【微知】vscode如何开启markdown的review模式?
ide·vscode·编辑器
携欢1 天前
CodeQL(Mac)安装与测试(Visual Studio)简明指南
ide·vscode·macos
Android小码家1 天前
Vscode + docker + qt 网络监听小工具
vscode·qt·docker
中国胖子风清扬1 天前
Rust 序列化技术全解析:从基础到实战
开发语言·c++·spring boot·vscode·后端·中间件·rust