一个特别常见的误会
下面两件事,在没有棋盘格背景的情况下长得一模一样:
- 一个 logo,背景区域是透明的,你导出 PNG 后想贴在网页的深色导航栏上
- 一个 logo,背景区域被填成了白色,导出时也存成了 PNG
在白色背景的看图软件里,它们看起来都是“白色背景的 logo”。
直到你把第一种贴到深色网页上——它完美融入;把第二种贴上去——它是一块突兀的白方块,四角还带着锯齿。
这个错误在导出环节极其常见,因为大多数修图软件的默认画布背景就是白色,稍不注意保存时就把背景合进去了。
棋盘格背景是干嘛的
答案很朴素:给“透明”一个可见的样子。
这个做法来自 Photoshop 等修图软件的传统——用两种很浅的灰白方块交替铺满,透明区域就显示成一片棋盘格。它同时满足两个要求:
- 足够中性——浅灰接近无色,不会干扰你对图像本身颜色、明度的判断
- 足够明显——图案化的纹理和图片内容天然区分,“这一块是透明”一眼就能看出来
另外,棋盘格还能透露更多信息:如果某个区域显示的是半明半暗的浅棋盘格,说明那里的 alpha 值是介于 0 和 1 之间的半透明(比如柔和的投影、发光边缘、抠图的羽化过渡),而不是全透明。
imgview 的三种背景:按一下 T 就够了
棋盘格适合看透明,但有些场景需要别的背景。imgview 里按 T 键,背景会在三种之间循环切换:
- 棋盘格(默认)——检查透明通道、检查抠图边缘
- 深色——看浅色元素、白色描边、发光效果、深色主题素材
- 白色——看印刷效果、白底展示、浅色细节
同一个透明图形,在这三种背景下的样子:
三种背景下的图形本身没有变化,变的是你对它的判断。这也是为什么“看图时能一键换背景”比看起来重要——同一张图,在不同背景上的观感差别可以很大。
什么时候需要认真看透明
- 导出 logo / 图标前后——确认背景真的透明,而不是白底
- 检查抠图边缘——发丝、毛绒、玻璃、烟雾这些柔和的边缘,放大后看有没有残留的原背景色(最常见的“白边”和“黑边”)
- 做深色模式适配——很多素材在浅色页面上很好看,放到深色界面上就消失了(白色描边的图标尤其明显)
- 交付给别人的素材——给同事的 PNG 如果带了白底,对方可能要重新做一遍
- 印刷前确认——在印刷里,“透明”和“白色”是完全不同的两件事
怎么在 imgview 里检查一张图的透明通道
- 双击打开图片(或把图拖进窗口)
- 按 T 切到棋盘格背景——如果整张图都被棋盘格包围,说明背景确实是透明的
- 按 1 切到原始尺寸(1:1),这样看到的是像素的真实样子,不会因为缩放掩盖锯齿
- 拖动图片到边缘区域,逐个角落检查:有没有残留的白边、灰边、杂色像素
- 要不要再看深色/白色效果,再按 T 循环切换
小技巧:判断“白边”还是“透明边缘”,来回按 T 切换背景最快——白边在任何背景下都是白的一条,而透明边缘会跟着背景变。
这些操作都只影响屏幕显示,imgview 是纯查看器,不会修改也不会写回文件——你随时关掉窗口就行。
顺带说说:各格式对透明的支持
| 格式 | 透明支持 | 说明 |
|---|---|---|
| PNG | 完整 alpha | 支持 0~255 的连续透明度,抠图的柔和边缘也能保留;无损,但体积偏大 |
| WebP | 完整 alpha | 同样的透明能力,体积通常比 PNG 小很多 |
| AVIF | 完整 alpha | 新一代格式,压缩率更高,编码稍慢 |
| GIF | 仅 1 位透明 | 每个像素只有“全透明”或“不透明”两种状态,所以抠图边缘一定会带锯齿 |
| JPEG | 不支持 | 根本没有透明通道,透明区域保存时会被填成某种颜色(通常是白) |
| SVG | 矢量 | 没有像素,透明由图形本身决定,放大不会失真 |
所以当有人问“为什么我的透明图存成 JPG 之后变白底了”,答案是:JPG 存不了透明,这不是软件的问题,是格式的能力边界。
imgview 支持的九类格式里(jpg / jpeg / png / gif / webp / bmp / svg / ico / avif),除了 JPEG 和 BMP 之外基本都带透明能力,SVG 更是矢量渲染——按 1、滚轮放大到很大也不会糊。
小结
透明是“负空间”,它自己看不见,只能靠背景衬托出来。
能一键切换棋盘格 / 深色 / 白色背景的看图工具,才算是真的能看清一张透明图。
如果你的工作里经常和透明素材打交道,可以试试 imgview:默认就是棋盘格背景,T 键循环切换,纯本地运行、图片不上传。