本文將介紹在一張圖片中顯示兩種內(nèi)容的原理，以及推薦一款我寫(xiě)的網(wǎng)頁(yè)小工具，讓你快速制作一張類(lèi)似的圖片。

在看文章的你，不妨試著切換一下明暗主題，即可看到下面的圖片內(nèi)容發(fā)生變化。

注：因微信公眾號(hào)壓縮，圖片可能無(wú)法正常變化，如需體驗(yàn)可前往少數(shù)派官網(wǎng)閱讀

這種圖片內(nèi)容切換生效的前提條件是：

• 圖片存儲(chǔ)格式為 PNG

• 查看圖片的背景是純白或純黑

我們都知道圖片格式有 PNG、JPEG、webP 等，但 PNG 可以保存圖片的透明部分，我們也是利用它可以保留透明部分的特性，來(lái)實(shí)現(xiàn)一張圖片塞下兩張圖片的內(nèi)容。另外這里也利用了人類(lèi)視覺(jué)天生具有彌補(bǔ)和聯(lián)想能力的特性，在一張幾千甚至上萬(wàn)個(gè)像素點(diǎn)的圖片中，我們把它的像素點(diǎn)「均勻地」摳掉一半，基本不會(huì)影響整體觀感。

這就類(lèi)似小時(shí)候特別流行的小瓷磚拼接馬賽克圖案，如果瓷磚足夠小、墻壁足夠大，遠(yuǎn)看過(guò)去圖片還是很「清晰的」。

所以我們可以選擇兩張圖片：

• 對(duì)于圖片一，摳掉奇數(shù)行的偶數(shù)列，和偶數(shù)行的奇數(shù)列像素；

• 對(duì)于圖片二，摳掉奇數(shù)行的奇數(shù)列，和偶數(shù)行的偶數(shù)列像素；

然后將兩張圖片重疊成一張圖片。這個(gè)過(guò)程用表格大概模擬一下就是（下圖 1 表示顯示圖片 1 的像素、2 表示顯示圖片 2 的像素）：

這樣我們就得到了一張混合了兩張圖片像素的圖片，雖然沒(méi)有那么精細(xì)——畢竟每張圖片我們只取了一半的像素過(guò)來(lái)，但不影響最終視覺(jué)觀感。接下來(lái)要做的就是如何：

• 在白色背景下只顯示圖片 1

• 在黑色背景下只顯示圖片 2

這樣才能達(dá)到我們切換黑白背景時(shí)，同一張圖片顯示不同內(nèi)容的目的。

調(diào)整 PNG 參數(shù)

PNG 的像素?cái)?shù)據(jù)一般由「紅 R、綠 G、藍(lán) B、透明 A」 組成，接下來(lái)我們只要把 RGB 改成全部 255 或者 0，就能顯示全白或者全黑的圖片。在這個(gè)基礎(chǔ)上通過(guò)設(shè)置透明度 A，讓該像素具備不同的明暗度，就能顯示圖片的黑白效果。

換句話說(shuō)，假設(shè)背景是白色的時(shí)候，有一張黑白偏白的圖片是看不見(jiàn)的；而當(dāng)背景是黑色的時(shí)候，黑白偏黑的那張圖片則是看不見(jiàn)的。

現(xiàn)在很多平臺(tái)比如少數(shù)派都有主題切換的功能，剛好具備在白色和黑色之間做切換的能力。所以我們就可以做一張融合了兩張黑白圖片的圖片，來(lái)達(dá)到主題變化帶動(dòng)圖片變化的效果。

暗色主題看到的是這張圖

亮色主題看到的是這張圖

快速制作

如果你覺(jué)得這樣的小巧思比較有意思，也想做一張這樣的圖，那么我也寫(xiě)了一個(gè)小工具供你使用。

https://dogodo-cc.github.io/black-white-image/

工具截圖

https://sspai.com/post/101521?utm_source=wechat&utm_medium=social

作者：甜甜的泥土

責(zé)編：克萊德