配置vscode背景图片

发布于 2021-11-10  5 次阅读


起因

心血来潮……因为之前vs、jetbrains全家桶都配置了背景,IDEA中配置是比较容易的

参考文档

vscode-background 背景插件

作者本人写的文档,比较简略,不过warns里的话告诉我们如何修改了

本插件是通过修改 vscode 的 css 文件的方式运行
所以会在初次安装,或者 vscode 升级的时候,出现以下提示,请选择 【不再提示】:

This extension works by editting the vscode's css file.
So, a information appears while the first time to install or vscode update.U can click the [never show again] to avoid it.

img

所以我们在json配置文件中按照css语法操作即可

官方配置说明

Config 配置项

Name Type Description
background.enabled Boolean 插件是否启用 If background enabled.
background.useDefault Boolean 是否使用默认图片 If use default images.
background.customImages Array<String> 自定义图片,最多 3 个 Your Your custom Images(Max length is 3)
background.style Object 自定义样式 Custom style
background.styles Array<Object> 每个图片的独立样式 Style of each image.
background.useFront Boolean 前景图/背景图。 在代码上面还是下面 true:On the top of code. false: Behind the code
background.loop Boolean 循环模式,会重复显示图片 loop mode, may repeat your images

Notice 提示

http 协议的外链图片在当前版本不能使用(vscode 限制),需要用 https 协议开头的外链地址。

You should use protocol https instead of http to the image,which is not support by vscode now.

具体操作

  1. 以管理员身份运行VS Code,安装background插件
  2. 打开设置,在搜索框中输入background,选择扩展中的plugin background,选择在setting.json中编辑(ctrl + shift + p -> user setting,所有插件都是同样方法配置)
  3. 在用户设置中输入以下代码,修改完后按Ctrl+S保存,会提示重启VS Code,点击确定后即可完成修改
//background 的相关配置 https://nosaid.com/article/vscode-background
    "update.enableWindowsBackgroundUpdates": true,
    "background.customImages": [
        "file:////C:/Users/mechrevo/Pictures/Saved Pictures/女孩 狼 ѩ 冬天 绘画.jpg" //图片地址
    ],
    "background.style": {
        "content": "''",
        "pointer-events": "none",
        "position": "absolute", //图片位置
        "width": "100%",
        "height": "100%",
        "z-index": "99999",
        "background.repeat": "no-repeat",
        "background-position": "50%, 50%",
        // 100%, 100%在拉伸时会出现不能铺满的情况, 所以用cover
        "background-size": "cover", //图片大小
        "opacity": 0.15 //透明度
    },
    "background.useFront": true,
    "background.useDefault": false, //是否使用默认图片

效果如下:

image-20211110202347891


随心所至