vs code设置好看的背景图片

vs code设置好看的背景图片，生成效果如下：

bg.jpg

第一步，下载background插件,找到settings.json文件

如果不知道在哪里找到可以参考下面的步骤

设置--扩展--CSS -- 右边的settings.json

按照图片进行到第四步 然后点击进去

settings.jpg

第二步，在setting.json中写样式

 "background.customImages": [
        "file://D:/vscode/config/bg.png"
    ],
    "background.style": {
        "content":"''",
        "pointer-events":"none",
        "position":"absolute",//图片位置
        "width":"100%",
        "height":"100%",
        "z-index":"99999",
        "background.repeat":"no-repeat",
        "background-size":"70%, 50%",//图片大小
        "opacity":0.2 //透明度
    },
    "background.useFront": true,
    "background.useDefault": false //是否使用默认图片

注意：file://D:/vscode/config/bg.png这个是背景图片的地址

我的settings.json所有代码如下

{
    "editor.renderIndentGuides": false,
    "editor.tabSize": 2,
    "eslint.autoFixOnSave": true,
    "window.zoomLevel": 0,
    "git.autofetch": true,
    "workbench.colorTheme": "Visual Studio Dark",

    
    "vscode_custom_css.policy": true,
    "terminal.integrated.rendererType": "dom",

    "material-icon-theme.activeIconPack": "vue",
    "background.customImages": [
        "file://D:/vscode/config/bg.png"
    ],
    "background.style": {
        "content":"''",
        "pointer-events":"none",
        "position":"absolute",//图片位置
        "width":"100%",
        "height":"100%",
        "z-index":"99999",
        "background.repeat":"no-repeat",
        "background-size":"70%, 50%",//图片大小
        "opacity":0.2 //透明度
    },
    "background.useFront": true,
    "background.useDefault": false //是否使用默认图片
}

编辑好了之后，重启vscode,好看的背景图片样式就生成了