請問大家這張神奇的圖是怎麼做的？圖片不是GIF！！！?

12-13

【12.24更新:已經明白了，感謝知友們的幫助，順便自己做了個簡單的圖，見下面(ps:主角是本人女票)】

看到的是一個屋子，但是打開看又是星辰，用PS打開也看不出來，求指教。【務必保存到手機里再看】 ]

【上面是題主原圖】

【修改後的】

挺簡單的，重點是利用屏幕的透明像素不能表達的原理，自己做圖的時候，新建一個黑色圖層(掩蓋打開後的黑色圖像，顯示白色圖像)，白色圖層(與黑色相反)，其他彩色(兩者同時顯現)，這樣就可以自己作圖了

由於第一名的答案被各種點贊還沒解答問題，我決定自己研究研究……
首先@王譽在自己的答案里已經提及了，這個文件點開之後保存是一個jpg，可是實際的格式卻是一個png。通過這一點我覺得可能是文件保存格式還有網頁識別的問題，於是我決定先從這兩者到底有什麼區別開始看。

然後我發現，jpg文件的保存方式跟png還有甚至諸如gif之類的很相似，都是利用索引表來進行圖片的再生成的，具體大家可以另外去看看相關技術。

然而！jpg跟png最大的不同在於，jpg採用RGB索引，而png採用的是RGBA進行索引。
關鍵就在於那個A，就是alpha通道，是一個決定透明度的數值。跟RGB用0-255來表達不同顏色比例相似（比如R255, B0, G0，表達大紅色），Alpha通道是通過0-100來表達像素的透明度的。

所以含有Alpha通道的像素點有什麼特點呢？大家會想一下RGBA這種儲存方式。
沒錯，其實像素本身是包含完整的RGB信息的！

所以接下來要做的，就是想辦法去除Alpha通道，得出原圖。
具體方法如下：
1.首先保存原圖，並更改擴展名為png。

2.在photoshop中打開，然後在命令行選擇：圖層—&>圖層蒙版—&>從透明區域。

3.這是可以留意圖層的縮略圖，已經跟題住的圖片一樣了，下一步只要把圖層蒙板刪掉。

4.大功告成！

————————————————這裡分隔一下————————————————

其實到這裡，只是解析了圖像原理部分，還是有深層次的關於頁面渲染的問題我沒搞懂，還希望有關的網頁前端工程師來解答一下，畢竟……我也只是個讀城市規劃專業的……（是不是可以at一下輪子哥幫忙？ @vczh）

以下是個人的一種猜測，求證實：
1.圖片以png格式直接通過修改擴展名的方式變成jpg，使得頁面在渲染的時候主動忽略了alpha通道的數值，得出原圖，或者是上傳的時候，知乎因為圖像壓縮需要，把圖像保存為源文件外加一份已經去除alpha通道的復件（即顯示的文件，估計為了壓縮大小提高渲染和讀取的速度，源文件800+kb，壓縮後300+kb）。
2.點擊後，頁面渲染方式改變，直接讀取源文件，重新獲得alpha通道的數值。

以上

來來來。我這個人最喜歡直播了。
下面我就來給題主直播一下這張圖片所謂「神奇」的本質所在。至於什麼動態圖呀或者是圖片超鏈接呀，我個人認為，都是扯淡！

首先我們把圖片保存一下截圖為下：

請注意，為什麼我保存的圖片名是「直接保存」呢。難道還有「間接保存」？答對了，但不是間接保存，是「點擊後保存」！

接下來我們看下文件夾保存後的文件圖片：

話說到了這個時候，大家的堵塞的思路好像靈光一現，嗦嘎原來是這樣的。好，讓我們把這兩張圖片拖進PS。這個時候.....

我去！這是什麼鬼？這種感覺就像前天剛通的下水道又被堵住了呀有木有。
這個時候就到了我們分析的階段了，憑我多年摳圖的經驗，這圖片後綴絕逼不可能是JPG，那是什麼格式呢？答對了！是TXT！哈哈，開個玩笑啦。PNG無疑了好嗎？

改完人家的後綴名，這個時候再拖進去看看：

咳咳，好開心廁所又被師傅桶通了。為了更具體給大家演示這個PNG的真諦，我這個下水道師傅決定在下面加三個顏色的圖層：白、黑、紅

。

多年的便秘終於好了。最後還是想認識更多朋友，不是公眾號是個人的。

http://weixin.qq.com/r/C5YSCpTEJMlbrdBp98MZ (二維碼自動識別)

————————非常感謝 @鍾墨魚的補充，感覺以前都不知道PNG的原理還有一個alpha通道的，經過大神一說，原來原圖是這樣的：

其實也不知道題主原圖是哪裡來的，但是我猜測其實最開始的圖片作者是要展現這樣的效果：

當你發到網頁上的時候因為背景呈現的是白色，這樣背景就和白色的星星融在一起就只能看到小男孩在房間里的圖像。

當你打開的時候，背景圖片其實是呈現黑色的，這樣背景就黑色的房子融在一起就只能看到小男孩在星空里的圖像了。

（不信你把這張圖保存起來看看=.=）
對於圖層—&>圖層蒙版—&>從透明區域這個步驟表示也不懂是幹什麼用的=.=，求大神解釋....

排名最高的答主 @王譽 (總是想起琅琊榜譽王) 答的很清楚,但未必解釋的通俗易懂. 那小弟就來試試講的通俗易懂一些. 大家跟著我一起來做個小實驗就很清楚啦.

1.首先,我們在桌面創建一個"新建文件夾",然後點開提問中的大圖,保存到文件夾中,並把保存的圖片重命名為"1.png"就像下圖這樣.

2.然後大家在目錄中建立一個"test.txt"文檔,文檔中的內容複製下面這段代碼:
&
&
&意思就是一個層標籤包含一個圖片標籤,圖片標籤指向剛剛保存的這張圖.

把"test.txt"的後綴改為 ".html" 如下圖:

3.接下來用Chrome瀏覽器打開這個test.html文件,可以看到圖片已經顯示:

現在讓它顯示不同的狀態, 按一下F12,調出開發者工具,然後選中div節點

在右側的樣式編輯中給div添加一個背景色,我這裡添加的顏色是黑色,效果如圖
我們只看到了原圖中的非黑色內容,因為"黑夜中很難看到黑色的東西", 所以只看到了顏色差異比較大且不透明的部分.

我們再點擊這個小黑塊,調節顏色選擇器,把背景色調成其它任意顏色試試看.

紅色背景效果如下, 因為背景色和圖中任何顏色都不同,所以我們什麼都看得到.

原理就是png圖片是可透明的, 原圖中有各種各樣的顏色,只是因為在不同的背景色下我們只能看到部分顏色而已.而本帖的圖為什麼點開才可以看到效果,是因為帖子中的圖已經被縮略化處理成了另一張圖片,這張圖片的格式為.JFIF (由jpeg衍生而來)
並非這張圖片有多麼神奇,只是眼睛被欺騙了而已.

萬惡的知乎居然不支持gif
點擊這裡查看動圖, 背景從黑到白再從白到黑的過程 :http://ww2.sinaimg.cn/large/6775d9c1jw1eyeielx51vg20r40g64qw.gif

懂了沒

Wp表示沒看到變化……

給你個理論啊
想要一個 $(left|r,g,b ight>,alpha)$ 像素疊在黑色上是 $left|r_1,g_1,b_1 ight>$ ，疊在白色上是 $left|r_2, b_2, g_2 ight>$ ，需要解這個方程：

理論上如果不限制（ $left|r_1,g_1,b_1 ight>$ ， $left|r_2, b_2, g_2 ight>$ ），三個分量可以解出三個 α 值來，如果想要只有一個 α 值，可以用超定問題的最小二乘法做。

iPhone5s用戶表示保存到手機裡面也沒變化。

看了票數最高的兩個答案，那麼我想問，怎麼做一幅這樣的圖片裝逼呢？

這個是png透明圖吧，根據背景色不同顯示不同的圖案。

這是直接打開的樣子，底版為白色

這是以幻燈片黑色底板的顯示效果。

狗血，6s表示無變化，沒錯，我就是來曬機子的，機智如我

IOS表示沒看到變化…

透明圖的地址：https://pic3.zhimg.com/6777ecdbddd567a2d02b72a6c24df6de.png
屋子圖的地址：https://pic3.zhimg.com/6777ecdbddd567a2d02b72a6c24df6de_b.jpg

這張圖是PNG格式，背景透明！先佔著。等用電腦來回答

https://github.com/647-coder/png_python

丟個github～拿python實現了一下。

http://www.gifcool.com 這裡有好多GIF

我用的是夜間模式，不明白你在說什麼→→

前段的問題啊…

終結本問題。
http://www.zhihu.com/question/31792489/answer/53964216

知乎夜間模式用戶表示也沒有變化