Visual Studio Code背景设置的两种方法
第一种方法!
下载background插件!安装即可!
如果要自己设置背景图片的话,在插件的设置里面找到扩展设置,单击进入设置,最后选择在settings.js中编辑代码!保存重新启动编译器即可!
代码:
"background.customImages": [
"file:///D:/vscoed/123.jpg ",
//文件的绝对路径,也可设置相对路径;
//最多可设置三个路径,以英文逗号分隔,分别对应拆分编译器的三个编译窗口;
],
"background.style": {
"content": "''",
"pointer-events": "none",
"position": "absolute",
"z-index": "99999",
"width": "100%",
"height": "100%",
"background-position": "center top",//设置背景位置可以是关键字,或者百分比;
"background-repeat": "no-repeat",//背景平铺,默认是向水平垂直方向平铺,这里设置不平铺no-repeat;
"background-size": "141%",//背景图片的大小;
"opacity": 0.1 //设置背景透明度!最大为1,最小为0;
},
"background.loop": true,
"window.autoDetectHighContrast": false,
最终展示结果:
第二种方法
找到Visual Studio Code的安装路径打开,找到workbench.desktop.main.css这个文件,进行编译,在最前面加上以下图片这些代码,这里我设置的是相对路径,所以不用写全局路径注意点,图片在本路径;
这是我的文件路径D:\MicrosoftVSCode\resources\app\out\vs\workbench
相对路径:
绝对路径:
注意点:参数可以看英文执行调整,注意盘符前面是三条斜杠,
代码:
body {
background-image: url('img.jpg');
background-size: 100%;
opacity: 0.7;
background-repeat: no-repeat;
}
最终展示结果: