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

小咪咪 2022-12-24 00:56 775阅读 0赞

# 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，然后就实现窗口透明效果了。
    
    ![fb26f3bb7631d8b377733c334be214db.png][]
    
    image.png

2.vscode窗口设置背景图

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

![d55c490851e40cc26e61fb5e059e2345.png][]

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 //设置窗口透明度。
    }

最终效果

![6b05a6462936eca62af2ab7f6fdec3da.png][]

image.png

[fb26f3bb7631d8b377733c334be214db.png]: /images/20221120/bcbfe2e9424a44dd9f860e99822bd92f.png
[d55c490851e40cc26e61fb5e059e2345.png]: https://img-blog.csdnimg.cn/img_convert/d55c490851e40cc26e61fb5e059e2345.png
[6b05a6462936eca62af2ab7f6fdec3da.png]: https://img-blog.csdnimg.cn/img_convert/6b05a6462936eca62af2ab7f6fdec3da.png