欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vs code窗口透明和设置背景图

程序员文章站 2022-07-14 11:57:12
...

linux  版本

 

1. 首先下载插件GlassIt-VSC

2. 进入设置页面:按F1 ,搜索打开工作区设置,进入设置页面后搜索glassit.alpha,然后就可以设置透明度了.

【快捷键:透明度提高(Ctr + Alt +Z),透明度降低(Ctr + Alt +C)】

 

windows 版本

1.vscode编辑设置窗口透明

  • 首先要在vs code的应用商店里面下载一个插件Windows opacity,然后安装插件Windows opacity。
  • 安装完成之后在设置里面搜索winopacity.opacity,会出现一个窗口,数值越小越透明,范围实在0-255,然后就实现窗口透明效果了。

    vs code窗口透明和设置背景图

    image.png

2.vscode窗口设置背景图

+首先也要下载一个插件background,然后在设置里面搜索background,选择在setting.json中设置。

vs code窗口透明和设置背景图

image.png


将代码复制粘贴进去就好了,图片地址记得改成自己喜欢的图片地址。

 

    "git.ignoreMissingGitWarning": true,
    "window.zoomLevel": 0,
    "explorer.confirmDelete": false,
    "files.autoSave": "onWindowChange",
    "files.autoSaveDelay": 0,
    "update.enableWindowsBackgroundUpdates": true,
    "background.customImages": [
        "file:///D:/pic/123.jpg"//图片地址
    ],
    "background.style": {
        "content":"''",
        "pointer-events":"none",
        "position":"absolute",//图片位置
        "width":"100%",
        "height":"100%",
        "z-index":"99999",
        "background.repeat":"no-repeat",
        "background-size":"100%,100%",//图片大小
        "opacity":0.2 //透明度
    },
    "background.useFront": true,
    "background.useDefault": false,//是否使用默认图片
    "liveServer.settings.donotShowInfoMsg": true,
    "workbench.colorTheme": "Monokai",
    "editor.quickSuggestions": {
        "strings": true
    },
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "winopacity.opacity": 240 //设置窗口透明度。
}

最终效果

 

vs code窗口透明和设置背景图

image.png