如何在vscode中设置一个狂炫酷霸吊炸天的背景图片

1.首先在vscode的左边栏扩展(快捷键Ctrl+shift+x)中,找到 background 这个插件,就是下图1这个萌妹纸图标的插件:

图1

仙人指路:遇到一些陌生的插件,细读它的细节、功能贡献及更改日志就可以解决绝大多数的问题开始使用。

2.安装这个萌妹纸。

安装完成,右下角会提示你restart vscode,重启即可。

重启之后,右下角会显示下图2这个吓人的警告,这是因为这个插件是通过修改 vscode 的 css 文件的方式运行 所以会在初次安装,或者 vscode 升级的时候,出现这个吓人的警告时点击齿轮设置不再显示即可。

图2

这个时候已经有插件默认的一个背景图片了,但是不够狂炫酷霸吊炸天,不能满足个性化需求。

3.设置自己喜欢的个性化壁纸。

文件---首选项---设置---搜索background

找到扩展中的background插件配置的部分,如下图3:

图3

自己设定背景图

在settings.json中编辑

初始截面如下图4:

图4

 在里面加入相应的设置代码:

 "background.enabled": true,    #是插件是否启用
    "background.useDefault": false,   #是否使用默认图片,false,我们要设置自己的!
    "background.customImages": [
    "file:///D:/个人空间/壁纸/1033287.jpg"
    ],                                 #设置图片路径,你电脑中想要设置为背景的图片的路径。
    "background.style": {
    "content": "''",
    "pointer-events": "none",
    "position": "absolute",
    "z-index": "99999",
    "width": "100%",
    "height": "100%",
    "background-position": "center",
    "background-repeat": "no-repeat",
    "background-size": "100%,100%",
    "opacity": 0.1
    }

最后就是background.style了,大家根据自己的喜好设置调试,注意后面的"opacity"是透明度,它的设置决定了背景图片的亮与暗,本文末尾有设置为0.8时的效果对比图。

具体的设置截面效果如下图5 

注:这里的图4图5已经有的背景是因为我之前设置过的,如果你没有设置,默认的背景图片这里是纯色的黑色或白色。

图5

4.叉掉文件保存,重启vscode,效果显示见下图6:

图6

当透明度设置为0.8时,透明度效果对比如下图7

 图7

 漂亮吧,伙计们。

齐活儿收工!

呃,还是要说一下,大家根据喜好来吧,但是也别设置太亮,设置0.1or0.2就行了,影响编程买椟还珠,捡了芝麻,丢了西瓜的事情咱可不干,学习码代码才是王道! 

感谢阅读,如果对你有所启发的话就点个赞鼓励一下吧!


版权声明:本文为shadowland_fqy原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。