Windows下新版本不安装插件对VS Code更换背景方法

1. 对之前版本修改VS Code背景方法的总结

该部分参考自rudy_zhou的CSDN博客

• 插件方法
  • 使用类似 background，background-cover的插件。

  这两个插件类似，前者仅能对vscode的编辑区设置背景，后者则可以将背景覆盖整个vscode界面。

• 修改vscode的css文件
  • 通过修改位于vscode的安装目录下的文件 .\resources\app\out\vs\workbench\workbench.desktop.main.css
  • 通过css的设置背景的格式，设置对应的背景。

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文件任意}的后面。