網(wǎng)頁是如何變灰的
純技術探討。
0.目錄
光的三原色、灰色和灰階算法
HTML和CSS
套用全局CSS filter使網(wǎng)頁變灰
1?光的三原色、灰色和灰階算法
1.1 光的三原色
初中物理告訴我們光的三原色是紅綠藍，顏料的三原色是紅黃藍（印刷業(yè)界是品紅/黃/青+黑）。由于顯色原理不同，光的三原色是一個加色模型（等量的紅、綠、藍在混合之后輸出的顏色是白色），而顏料的三原色是一個減色模型。
顯示器發(fā)光自然靠的是光，因此適用光的三原色模型。一臺色域為sRGB的顯示器，在紅、綠、藍三個維度上分別能發(fā)出0-255級的光。當紅、綠、藍三種光線的強度都為255（最亮）時，顯示器理論上應該顯示純白色。
1.2 灰色
用(x,?y,?z)分別描述某一個給定顏色當中的紅、綠、藍色的數(shù)值。(0, 0, 0)代表純黑色，(255, 255, 255)代表純白色，那么(a, a, a)（其中0<a<255）是什么顏色？
對，都是灰色，不同程度的灰色。
那么如果通過某種算法可以將一張彩色的圖像轉(zhuǎn)換為灰階圖像（grayscale image, 僅含有灰色的圖像），這種算法就統(tǒng)稱為灰階算法。
1.3 灰階算法
灰階算法只是一類算法的統(tǒng)稱。它的作用是把圖像上每一個像素【RGB=(x,y,z)】通過一定的處理，映射成為一個灰色像素點【RGB=(a,a,a)】。
完成這種映射的算法千奇百怪。目前比較常用的一種計算灰度取值（即上文中的參數(shù)a）的算法是：
Gray = (Red * 0.2989 + Green * 0.5870 + Blue * 0.1140)
其中0.2989、0.5870和0.1140都是經(jīng)驗參數(shù)：俺不知道為什么，但俺尋思這個值能用。
另外一些算法有暴力平均法、去飽和法（轉(zhuǎn)換為HSL模型后設置飽和度0）等等。它們最終的目的都是一樣的：將給定內(nèi)容中全部像素點映射為灰色像素點，實現(xiàn)整體內(nèi)容的灰度處理。
2 HTML和CSS
2.1 HTML
HTML（HyperText Markup Language, 超文本標記語言）是一種標記語言（不是編程語言）。一個HTML文檔（一個網(wǎng)頁）由層層嵌套的標簽組成。純HTML只告訴瀏覽器“我這個網(wǎng)頁上有哪些內(nèi)容”，比如“一只青蛙一張嘴，兩只眼睛四條腿”就描述了青蛙的結(jié)構：眼睛×2，嘴，腿×4.
2.2 CSS
層疊樣式表（Cascading Style Sheet）通常與HTML一起使用（在目前的大部分網(wǎng)站來說算是官配cp了）。它可以為HTML文檔中出現(xiàn)的標簽添加額外的描述，比如顏色、形狀、大小。
3 CSS filter
在CSS規(guī)范當中，有一類比較特殊的規(guī)則“濾鏡（filters）”，一般用于處理圖像。跟大部分人認知中的濾鏡功能一樣，濾鏡可以改變圖像的一些屬性，比如灰度、亮度、陰影、顏色反轉(zhuǎn)和模糊。
“灰度”這一函數(shù)的標準語法是：
filter: grayscale(0-1取值或0%-100%)
它可以把一張彩色圖像通過灰度算法映射為一張灰度圖像。
如果在WebStorm或者類似的面向網(wǎng)頁前端的編輯器中使用，編輯器會自動補全幾種針對不同瀏覽器的語法。所以一般通過審查元素看到的內(nèi)容會是下面的樣子：
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
類比Photoshop中的圖層，在一個網(wǎng)頁當中，不同的元素也有不同的疊放順序和主次之分。要使這個灰色濾鏡對整個網(wǎng)站上的內(nèi)容都生效，有兩種思路：
為主div中添加filter: grayscale。
為html標簽或body標簽添加filter: grayscale。但是如果直接在body標簽中添加的話，position: fixed這條屬性就會失效。所以個人建議盡可能地在html標簽中添加。
4. 參考/擴展閱讀
1.?光と色の三原色 色が見える仕組み（７）: 光と色と：http://optica.cocolog-nifty.com/blog/2012/04/post-ab6f.html
2. 6種圖片灰度轉(zhuǎn)換算法：https://github.com/aooy/blog/issues/4
3.?filter - CSS（層疊樣式表） | MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
