本文揭示了如何在同一张图片中巧妙地展示两种不同内容，核心在于利用PNG格式对透明度的支持。通过对像素进行“均匀抠掉一半”的处理，并根据背景色（纯白或纯黑）的切换，选择性地显示隐藏在其中的另一张图片。这种技术能够实现视觉上的无缝衔接，尤其适用于需要根据主题色变化而展示不同信息的场景，如网站的暗/亮主题切换。文章还提供了一个实用的网页小工具，帮助用户轻松制作此类双内容图片。

💡 **PNG透明度实现双内容显示**：文章核心原理是利用PNG图片格式支持透明度（Alpha通道）的特性。通过将一张图片的一半像素（例如奇数行偶数列和偶数行奇数列）移除，并对另一张图片进行相反的像素移除（奇数行奇数列和偶数行偶数列），然后将两张图片重叠，即可创建一张“隐藏”了两种内容的图片。

🎨 **视觉弥补与像素选择**：在数千或上万像素的图片中，移除一半像素通常不会显著影响整体观感，因为人的视觉具有联想和弥补能力。这种处理方式类似于马赛克效果，当像素足够小时，远观依然能保持清晰度。

⚫⚪ **黑白背景下的选择性显示**：通过修改PNG图片的RGB值和Alpha值，可以控制像素在纯黑或纯白背景下的显示效果。当背景为白色时，将Alpha值调低使得偏白的像素不可见；当背景为黑色时，将Alpha值调低使得偏黑的像素不可见，从而在切换背景色时实现图片内容的动态变化。

🌐 **实际应用场景**：这种技术非常适合与网站或应用的主题切换功能相结合，例如少数派的明暗主题切换。一张图片可以同时承载暗色主题下的内容和亮色主题下的内容，提升用户体验和视觉创意。

本文将介绍在一张图片中显示两种内容的原理，以及推荐一款我写的网页小工具，让你快速制作一张类似的图片。

在看文章的你不妨试着修改下少数派的主题色「明暗主题切换一下」，可以看到下面的图片在变化。

 

 

原理

生效的前提条件： 

图片存储格式为 PNG查看图片的背景是纯白 or 纯黑

我们都知道图片格式有 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

这样我们就得到了一张混合了两张图片像素的图片，只是没有那么精细。毕竟每张图片我们只取了一半的像素过来，不过其实不影响最终视觉观感。

现在要做的就是如何：

在白色背景下只显示图片1在黑色背景下只显示图片2

这样就达到了切换黑白背景时同一张图片显示不同内容的目的。

PNG 的像素数据是 「红R、绿G、蓝B、透明A」 组成的，我们只要把 RGB 改成全部 255 或者 0 就会显示全白或者全黑的图片，然后通过设置 A，让该像素有不同的明暗度，来显示图片的黑白效果。

也就是假设背景是白色的时候，有一张黑白偏白的图片是看不见的。背景是黑色的时候，黑白偏黑的那张图片是看不见的。

现在很多平台「比如少数派」都有主题切换的功能，刚好基本都是在白色和黑色之间做切换，我们就可以做一张融合了2张黑白图片的图片，来达到主题变化带动图片变化的效果。

 

工具

如果你觉得这样的小巧思比较有意思，也想做一张这样的图，那么我也写了一个小工具供你使用。

工具地址