美文网首页Web前端之路
vs code设置好看的背景图片

vs code设置好看的背景图片

作者: 羽翼的翼 | 来源:发表于2019-08-09 11:14 被阅读1次

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,好看的背景图片样式就生成了

相关文章

网友评论

    本文标题:vs code设置好看的背景图片

    本文链接:https://www.haomeiwen.com/subject/fcucjctx.html