[开发工具] vscode 怎么设置背景图片

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 开发工具 -> vscode 怎么设置背景图片 -> 正文阅读

[开发工具]vscode 怎么设置背景图片

方法

使用background插件

安装插件以及设置步骤

1.点击左边活动栏最下边的插件按钮

2.输入框输入“background”搜索插件

3.点击“安装”按钮

4.此时界面如下所示：
在这里插入图片描述

5.点击“设置”图标，点击下拉选项的“拓展设置”
在这里插入图片描述

6.此时会出现以下界面，继续点击“在settings.json中编辑”
在这里插入图片描述

7.在“settings.json”文件中配置，放进想要的图片
在这里插入图片描述

相关代码（含注释）：

{
    // 是否开启背景图显示
    "background.enabled": true,
    // true-显示默认的图片  false-显示用户自定义的图片
    "background.useDefault": false,
    // 最多设置三张图片，默认显示最上方的图片，当打开多个侧边栏时再依次显示后面的背景图片
    "background.customImages": [
        "https://img9.51tietu.net/pic/2019-091404/bfumom0jpwmbfumom0jpwm.jpg",
        "https://img9.51tietu.net/pic/2019-091404/hi0o5sou5wzhi0o5sou5wz.jpg",
        "https://img9.51tietu.net/pic/2019-091404/u2kdrqgq0chu2kdrqgq0ch.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": "contain",
        // 设置透明度
        "opacity": 0.1
    },
    "editor.minimap.enabled": false,
}