vsCode 自定义修改背景图,不使用background插件,只操作源css文件

vsCode 自定义修改背景图,不使用background插件,只操作源css文件

前言

之前使用了background插件来自定义vscode的背景图,需要在配置文件中配置一下,然而背景图只能覆盖代码区,菜单区是不能覆盖的。结果最近vscode一更新,原来写的配置代码都木有了,哭死。这次我来修改一下vscode的源css文件,直接插张图片进去,总之先放效果图。
在这里插入图片描述

实现方法

图文一起上
1.先找到vscode的源css文件位置
在这里插入图片描述
2.vscode打开这个workbench.main文件,并找到body的样式
先别眼晕ctrl+f搜索 body{. 为了你们的眼睛着想,别去搜body哦。
找到大概第五个,主要看这个body的前后有没有奇怪的.或者-
在这里插入图片描述
3. 对body添加图片
图片要用file:///D:/xxxxx这种格式写,代码部分可以直接用我的去覆盖,别忘了改图片路径。
这一段用于让大家看清功能,都是比较简单的css语法
这里我用opacity: 0.93 !important; 让图片透明化,注意这里图片和代码文字都能会被透明度影响,0.93是我自己比较舒服的程度。
可以直接把下面那一长串的粘过去用,两段代码都是一样的,就是格式不同而已。

body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-size: 11px;
  user-select: none;
  pointer-events: auto !important;
  background-size: 100% !important;
  opacity: 0.93 !important;
  background-position: 0 0 !important;
  background-image: url("file:///D:/vsCodeBgImages/03.muilk.jpg") !important;
  content: "";
  position: absolute;
  z-index: 99999;
  width: 100%;
  background-repeat: no-repeat;
}
body{height:100%;width:100%;margin:0;padding:0;overflow:hidden;font-size:11px;user-select:none;pointer-events:auto !important;background-size:100% !important;opacity: 0.93 !important;background-position: 0 0 !important;background-image: url('file:///D:/vsCodeBgImages/03.muilk.jpg') !important;content:'';position:absolute;z-index:99999;width:100%;background-repeat:no-repeat;}
  1. 保存后重启vscode,关闭错误提示,就可以欣赏自己的图了。
发布了5 篇原创文章 · 获赞 7 · 访问量 1940

猜你喜欢

转载自blog.csdn.net/qq_35192247/article/details/100353181