VSCode 中设置背景的两种方法

Visual Studio Code，简称VS code，是一个轻量级但功能强大的源代码编辑器，可在您的桌面上运行，并且可用于Windows，macOS和Linux。它具有对JavaScript，TypeScript和Node.js的内置支持，并具有丰富的其他语言（例如C ++，C＃，Java，Python，PHP，Go）和运行时（例如.NET和Unity）扩展的生态系统。 

今天介绍几种在Visual Studio Code中设置背景的方法！！！

方法1

修改workbench.desktop.main.css文件设置背景图片

vscode其实就是一个网页程序,所以可以找到vscode中的一个文件进行修改它的背景图片,这个文件就是:workbench.desktop.main.css。

这个文件的路径是在vs code安装目录,如下：

例如: D:\Microsoft VS Code\resources\app\out\vs\workbench\workbench.desktop.main.css

然后打开这个workbench.desktop.main.css 文件进行 背景的添加设置, 注意这个文件打开后需要格式化代码一下!

背景图可以设置全局显示背景图 也可以 局部显示背景图

局部显示背景图，如下css代码:

body {

    background-image: url('file:///图片地址');

    background-size: 20%;

    background-position: 100% 100%;

    opacity: 0.75;

    background-repeat: no-repeat;

}

设置完成后重启vscode,如下图: 

注意: 局部显示的图片格式最好选择png格式的

全局显示背景图，如下css代码:

body {

    background-image: url('file:///图片地址');

    background-size: 100%;

    opacity: 0.75;

    background-repeat: no-repeat;

}

注意: 这种修改workbench.desktop.main.css 文件的方法来设置背景 如果VScode自动软件更新后  背景会消失，需要重新设置!

方法2

使用background插件

在vscode插件市场搜索: background插件、然后进行安装。如下图：

这里background背景插件还提供了一些用户自定义的配置参数, 这些配置参数设定在setting.json文件中，如下表：

| name                    | Type              | Description                                                  |

| ----------------------- | ----------------- | ------------------------------------------------------------ |

| background.enabled      | Boolean           | ==插件是否启用==   If background enabled   默认true          |

| background.useDefault   | Boolean           | ==是否使用默认图片== If use default images   默认true        |

| background.customImages | Array<String地址> | ==自定义图片== Your Your custom images                       |

| background.style        | Object            | ==自定义样式== Custom style                                  |

| background.styles       | Array<Object>     | 每个图片的独立样式 Style of each image                       |

| background.useFront    | Boolean          | 前景图/背景图。 在代码上面还是下面  ==一般设置true==         |

| background.loop         | Boolean           | 循环模式，会重复显示图片    loop mode, may repeat your images |

在setting.json中配置案例:

 "background.customImages": [

        "file:///D:/6.png"   //图片地址

    ],

    "background.style": {

        "content":"''",

        "pointer-events":"none",

        "position":"absolute",//图片位置

        "width":"100%",

        "height":"100%",

        "z-index":"99999",

        "background.repeat":"no-repeat",

        "background-size":"25%,25%",//图片大小

        "opacity":0.2 //透明度

    },

    "background.useFront": true,

    "background.useDefault": false,//是否使用默认图片