每天上網，你發現網頁上超鏈接絕大多數都是藍色了么?
1993年的一個瞬間，超鏈接突然統一顯示成藍色，這究竟是怎么回事?好像沒人說得清，Elise Blanchard 對此有點個人猜測：
有人說超鏈接的藍色是選出來的，但 W3C 直到 1994 年才建立起來，因此 93 年 Web 可訪問性的標準還沒有出現。假定文本顏色默認為黑色，鏈接則為藍色，那么可以看到二者之間的對比度為 2.3：1，似乎并不足以體現出清晰的差異性。相反我倒是覺得 Cello 與 Mosaic 都受到當時用戶界面設計中一些共通趨勢的啟發。所以我的理論是這樣：Windows 3.1 是在這兩個項目之前幾個月推出的，也在界面中第一個采用藍色作為選定色，于是設計人員自然而然地想到在超鏈接上使用相同的顏色。
另外，我們都知道 Mosaic 的靈感來自 ViolaWWW，也保留了后者在界面中使用的灰色背景與黑色文本。查看 Mosaic 的發行說明，可以看到 0.7 版本中首先選擇了將帶有下劃線的黑色文本作為超鏈接形式。但直到 93 年的 4 月中旬，情況才發生了巨變。在此之前，從1985 年開始微軟一直使用帶有下劃線的黑色文本來表示超鏈接，有人還認為微軟這是竊取了蘋果 Lisa 的外觀與視覺感受。
我認為，我們使用藍色超鏈接的真正原因單純是彩色顯示器的快速流行。Mosaic 產品的普及與彩色顯示器相關，藍色超鏈接也是一樣。年紀較長的朋友肯定還記得，Mosaic 的出現正好是在行業開始支持彩色顯示器的關鍵節點。之前的標準，是使用下劃線、懸停顯示狀態信息或者帶邊框的黑色文本;但 Mosaic 毅然選擇使用藍色，而且將瀏覽器移植到多種操作系統之上。這讓 Mosaic 成為互聯網使用的標準瀏覽器，也讓它的用戶界面成為全世界執行網絡交互時的默認表達。
這是有歷史原因的，在互聯網剛剛誕生之時，當時網頁的默認顏色中，除了黑色以外最深的顏色就是藍色。為了更易區分，“互聯網之父”的Tim Berners-Lee爵士便選擇了這個顏色，此后的超鏈接的默認顏色也就是藍色了
文章來源：盧松松博客 歡迎分享
讓網頁變為黑白配色，是個常見的訴求。而且往往是突如其來的訴求，是無法預知的。當發生這樣的需求時，我們需要迅速完成變更發布。
2022年12月1日，各大網站首頁已經變成了黑白配色。
這一行代碼是個CSS代碼：
filter: grayscale(1)
復制代碼為了使整個網頁生效，你可以把它放在 <html> 標簽的樣式里。直接寫到 html 文件內，例如：
<style>
html {
filter: grayscale(1);
}
</style>
復制代碼你也可以用內聯樣式，優先級最高：
<html style="filter:grayscale(1)">
...
</html>
復制代碼為了更好的兼容性，你可以加一下前綴：
<html style="filter:grayscale(1);-webkit-filter:grayscale(1)">
...
</html>
復制代碼我們使用了 CSS 特性 filter，并用了 grayscale 對圖片進行灰度轉換，允許有一個參數，可以是數字（0到1）或百分比，0% 到 100% 之間的值會使灰度線性變化。
如果你不想完全灰掉。可以設置個相對小的數字。
掘金首頁是設置了 0.95，也挺大的，看不出彩色。
我們使用了 CSS 特性 filter，兼容性還是不錯的：
如果你想獲得更好的兼容性，可以加一個前綴 -webkit-：
filter: grayscale(.95);
-webkit-filter: grayscale(.95);
復制代碼這正是掘金的做法：
掘金是把樣式加到了 html 元素上。
我的小網頁是把 filter 樣式加到了 <body> 元素上。通常這沒有問題。
<body style="filter:grayscale(1);-webkit-filter:grayscale(1)">
...
</body>
復制代碼但如果你的網頁內有「絕對和固定定位」元素，一定要把 filter 樣式加到 <html> 上。
原因見: drafts.fxtf.org/filter-effe…
引用：
A value other than none for the filter property results in the creation of a containing block for absolute and fixed positioned descendants unless the element it applies to is a document root element in the current browsing context.
翻譯：
若 filter 屬性的值不是 none，會給「絕對和固定定位的后代」創建一個 containing block，除非它適用的元素是當前瀏覽上下文中的文檔根元素（即<html>）。
因此，兼容性最好的方法是把 filter 樣式加到 <html> 上。