如何取消Visual Studio Code图片预览的透明棋盘格背景

VSCode默认的图片预览功能会使用棋盘格图案渲染透明区域，其中浅色方格与编辑器背景色保持一致，想要直接以编辑器背景色作为预览底色、去掉棋盘格的需求，可通过以下两种方式实现：

方案1：修改原生预览样式（无需更换预览工具） #

借助自定义样式扩展即可直接修改原生预览的背景规则，操作步骤如下：

• 安装Custom CSS and JS Loader扩展
• 在本地新建后缀为.css的自定义样式文件，写入以下代码：

.image-preview .image-preview-container {
  background: var(--vscode-editor-background) !important;
}

• 打开VSCode设置，搜索Custom CSS: Styles配置项，填入你创建的CSS文件的绝对路径，路径需要遵循file协议格式：
  • Windows示例：file:///C:/Users/用户名/Documents/vscode-custom.css
  • macOS/Linux示例：file:///home/用户名/vscode-custom.css
• 按下Ctrl+Shift+P（macOS为Cmd+Shift+P）调出命令面板，执行Reload Custom CSS and JS命令，重启VSCode后即可生效。
  该方案适配所有主题，切换主题时预览背景会自动和当前编辑器背景同步。

方案2：使用第三方图片预览扩展 #

现有多款第三方图片预览扩展原生支持自定义透明区域背景，可直接安装Luna Paint或Image Preview扩展，在扩展设置页中将透明背景设置为和编辑器背景一致即可，无需修改全局样式。

官方设置开关相关说明 #

此前相关的功能请求议题已因关注度不足关闭，若需要官方内置该功能，可提交新的功能请求，待获得足够多的用户支持后，官方会评估在后续版本中加入对应设置开关的可行性。

内容的提问来源于stack exchange，提问作者Léonard