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