当前位置:首页|资讯

vs code背景图片设置教程(新版) background插件2.0版本设置电脑小白向教程

作者:不会空气斩的波克基斯发布时间:2024-10-26

1.旧版json文件报警问题


这几天vs code的国人插件background迎来了更新,十分好用,但是json设置和旧版不一样。


旧版settings.json的配置文件:

如果你打开settings.json,就会发现这里有了警告,要求你使用新版的规范:


2.下载/更新background插件


如果你以前下载过这个插件,在拓展里进行更新就可以了。如果你没有这个插件,则需要在拓展中搜索并下载background插件(不要下错了,下载和图片所示的图标一样的插件)

下载后,右下角会提示你需要重启vs code,点击重启就可以了。



3.配置非全屏背景的background的json文件


下载好background插件之后,点击左下角的小齿轮,打开设置:


然后在弹出界面里搜索background:


在拓展分类中找到background插件,在这里一共有五个选项,除去第一个默认开启并且可以勾选的之外,剩下的四个都需要在settings.json文件中进行配置。


回到刚才的设置区域,我们首先来配置editor,点击在settings.json中设置

打开设置文件可以看到预先帮你写了一部分代码,大概如下:


style是css属性,不过学过css也不要紧的,先大概知道这个是设置样式的就可以了


background-position 设置的是图片的位置,一共有两个百分比的参数。如果想要让图片向右移动,则需要让第一个参数的数值变小(可以为负,超出部分会变成黑边),想要向左移动则需要改大。如果想要向下移动,则需要把第二个参数变大,想要向上移动则需要把第二个参数变小。这里可以使用css允许的数据单位,除了百分比,也可以使用px。


background-size是设置图片的尺寸,一般用auto就行了,如果你的图片像素太小会留出黑边的话,可以写cover充满整个区域。opacity是透明度,推荐设置在0.1~0.3之间。如果你对css有其他的了解,例如会写css滤镜,可以在styles中设置其他的css样式,这里就不展开讲了。


images是文件路径,允许http协议和file协议,本地文件的话就是file啦,当然不能直接复制文件路径,比较方便的办法就是利用浏览器打开图片,然后在浏览器中复制文件的地址,这样就能获取到file路径了:





例如这样↑

后面是要不要轮播,如果你设置了多个图片并开启轮播后,背景会时不时变化一下。

如果你能顺利配置Editor,那么相信其他的对你也没有难度:

设置方式都是如出一辙的,在此不再赘述。


4.配置全屏背景的background的json文件

全屏和非全屏有一点点不太一样,如果你想要配置全屏,最好还是把非全屏的配置全部注释掉比较好,不然会出现重叠的问题。


这是我的全屏背景配置:


大部分地方和非全屏一样,比较特殊的是透明度要调高一点。具体原理我并不清楚,可能是全屏的设置层叠方式不一样,不过大概是透明度越高越遮文字,因此推荐的透明度设置在0.8-0.9。


5.总结

也不知道要总结什么...萌新没怎么写过攻略,可能写的不太好,总之感谢看到这里的你,如果有什么问题可以在评论区发出来让大家看看帮帮忙。


如果对css技术有兴趣也可以自己学学,不过搞这个不如找点好看的图片,找图片可以去pixiv,也可以去堆糖,其他平台会有水印。



Copyright © 2024 aigcdaily.cn  北京智识时代科技有限公司  版权所有  京ICP备2023006237号-1