1. 对之前版本修改VS Code背景方法的总结
该部分参考自rudy_zhou的CSDN博客
- 插件方法
- 使用类似
background
,background-cover
的插件。
这两个插件类似,前者仅能对vscode的编辑区设置背景,后者则可以将背景覆盖整个vscode界面。
- 使用类似
- 修改vscode的css文件
- 通过修改位于vscode的安装目录下的文件
.\resources\app\out\vs\workbench\workbench.desktop.main.css
- 通过css的设置背景的格式,设置对应的背景。
- 通过修改位于vscode的安装目录下的文件
2. 新版本存在的问题
VS Code在一次更新后,为了文件的安全性,不再允许读取或者使用未经授权的文件。这样在使用修改css文件的时候,引入的背景图片无法被VS Code获取。
修改css文件时不能使用相对或者绝对路径来引入图片。
3. 解决方法
可以改为将图片转为base64格式引入。
图片转base64可以通过网上在线转换完成,或者通过类似如下的python代码完成(代码来自JimmyAndRushking的csdn博客,未对源代码进行修改):
import base64
img_path = 'D:xxx/file/img/juwan.jpg'
with open(img_path, 'rb') as f:
image_data = f.read()
base64_data = base64.b64encode(image_data) # base64编码
print(base64_data)
print(type(base64_data))
该代码在对于部分图片生成会存在问题,可以使用网上的在线图片转base64工具完成
下面给出一个示例代码,替换代码中url(data:image/png;base64,该文件的base64编码)
中png
为对应图片的拓展名。
body{height:100%;width:100%;margin:0;padding:0;overflow:hidden;font-size:11px;user-select:none;pointer-events:100% !important;background-size:cover !important;opacity: 0.92 !important;background-position:right !important;background-image: url("data:image/png;base64,该文件的base64编码") !important;content:'';position:relative ;z-index:99999;width:100%;background-repeat:no-repeat ;}
可以将该代码粘贴到对应css文件任意}
的后面。