本文将介绍在一张图片中显示两种内容的原理，以及推荐一款我写的网页小工具，让你快速制作一张类似的图片。
在看文章的你，不妨试着切换一下明暗主题，即可看到下面的图片内容发生变化。
注：因微信公众号压缩，图片可能无法正常变化，如需体验可前往少数派官网阅读
这种图片内容切换生效的前提条件是：
图片存储格式为 PNG
查看图片的背景是纯白或纯黑
我们都知道图片格式有 PNG、JPEG、webP 等，但 PNG 可以保存图片的透明部分，我们也是利用它可以保留透明部分的特性，来实现一张图片塞下两张图片的内容。另外这里也利用了人类视觉天生具有弥补和联想能力的特性，在一张几千甚至上万个像素点的图片中，我们把它的像素点「均匀地」抠掉一半，基本不会影响整体观感。
这就类似小时候特别流行的小瓷砖拼接马赛克图案，如果瓷砖足够小、墙壁足够大，远看过去图片还是很「清晰的」。
所以我们可以选择两张图片：
对于图片一，抠掉奇数行的偶数列，和偶数行的奇数列像素；
对于图片二，抠掉奇数行的奇数列，和偶数行的偶数列像素；
然后将两张图片重叠成一张图片。这个过程用表格大概模拟一下就是（下图 1 表示显示图片 1 的像素、2 表示显示图片 2 的像素）：
这样我们就得到了一张混合了两张图片像素的图片，虽然没有那么精细——毕竟每张图片我们只取了一半的像素过来，但不影响最终视觉观感。接下来要做的就是如何：
在白色背景下只显示图片 1
在黑色背景下只显示图片 2
这样才能达到我们切换黑白背景时，同一张图片显示不同内容的目的。
▍调整 PNG 参数
PNG 的像素数据一般由「红 R、绿 G、蓝 B、透明 A」 组成，接下来我们只要把 RGB 改成全部 255 或者 0，就能显示全白或者全黑的图片。在这个基础上通过设置透明度 A，让该像素具备不同的明暗度，就能显示图片的黑白效果。
换句话说，假设背景是白色的时候，有一张黑白偏白的图片是看不见的；而当背景是黑色的时候，黑白偏黑的那张图片则是看不见的。
现在很多平台比如少数派都有主题切换的功能，刚好具备在白色和黑色之间做切换的能力。所以我们就可以做一张融合了两张黑白图片的图片，来达到主题变化带动图片变化的效果。
暗色主题看到的是这张图
亮色主题看到的是这张图
▍快速制作
如果你觉得这样的小巧思比较有意思，也想做一张这样的图，那么我也写了一个小工具供你使用。
🔗 https://dogodo-cc.github.io/black-white-image/
工具截图
