vscode背景图片设置分享

小诺诺伊尔

已于 2023-05-18 22:06:59 修改

阅读量634

点赞数

文章标签： vscode ide 编辑器

于 2023-05-18 22:03:37 首次发布

本文链接：https://blog.csdn.net/bupeiwo/article/details/130755354

版权

俗话说得好：工欲善其事，必先利其器，设置一个喜欢的背景是提高写代码效率的前提（狗头）

环境

windows10+vscode2022

使用插件

background
在这里插入图片描述

设置效果

先展示一下背景设置的效果：
穹妹
个人喜欢把人物放在右下角
蜘蛛侠
在这里插入图片描述

设置步骤

先找张喜欢人物的图片

在这里插入图片描述

如果直接当背景的话会是如下效果：

在这里插入图片描述
我们需要对图片进行处理

对图片进行处理
使用抠图软件将人物抠出，我使用的是一个在线抠图软件 removebg
效果如下

将图片保存为png格式

3. 配置文件
在setting.json文件中写入如下代码，打开方法可自己查找。

 "background.customImages": [
  "file:///D:/Microsoft VS Code/background/穹妹4.png"  // 图片地址
],
"background.style": {
    "content":"''",
    "pointer-events":"none",
    "position":"absolute",  // 图片位置
    "right":"200px",//距离右边缘距离
    "bottom":"0",//距离底部距离
    "width":"40%",
    "height":"110%",
    "z-index":"99999",
    "background.repeat":"no-repeat",
    "background-size":"cover",  // 图片大小
    "opacity":0.4  // 透明度
},
"background.useFront": true,
"background.useDefault": false,

图片位置大小的设置方法
有时通过设置参数并不能很好的达到理想效果，打开左侧窗口时还会出现遮挡变形的情况，我采取了一种简单粗暴的方式来解决：
通过截图来改变图片位置
截图后的图片如下所示：
直接在图片显示页截图，因为背景和vscode的背景色相同，就没有再把人物抠图抠出来了。
再次插入vscode中：

可以看到效果还不错。
同理，其它位置的图片也可以通过这种方式来简便设置，模糊度个人感觉设置在0.5以下观感较好。
最后分享一些好看的背景图和配置，如果感觉文章有用麻烦点个赞呀，感谢！