大家應該有發現最近幾天不少網站變成了黑白色，在哀悼日時，很多網站都需要全站變成黑白配色，今天對這個實現的技術做了一些探索性瞭解，在此進行一個記錄分享。 使用的樣式部分：下麵的css部分想必大家應該都可以看懂，主要是對主流的谷歌內核瀏覽器和小眾些的品牌瀏覽器做整體的網頁圖片處理，IE瀏覽器除了IE10 ...
大家應該有發現最近幾天不少網站變成了黑白色，在哀悼日時，很多網站都需要全站變成黑白配色，今天對這個實現的技術做了一些探索性瞭解，在此進行一個記錄分享。
使用的樣式部分：下麵的css部分想必大家應該都可以看懂，主要是對主流的谷歌內核瀏覽器和小眾些的品牌瀏覽器做整體的網頁圖片處理，IE瀏覽器除了IE10和11基本都做了覆蓋。
css代碼：
<style>
*,html{
-webkit-filter:grayscale(100%);
-moz-filter:grayscale(100%);
-ms-filter:grayscale(100%);
-o-filter:grayscale(100%);
filter:grayscale(100%);
filter: gray;
}
</style>
那麼大家關註的IE10和IE11怎麼處理呢？
今天對這個問題做了詳盡的瞭解，其中包括多種方法，不過最後都不滿意，有的確實也做到了，不過種種瑕疵被捨棄了。
突然想到翻一翻其他大廠或網站的做法，於是又找尋了一段時間，發現南京市某部門網站的做法挺不錯，對這個問題交出了正確的答卷，在此分享給大家。
在這裡整理成了一個js壓縮文件，方便大家預覽和引入使用（建議保存到自己伺服器後再引用）
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/blogs/764492/grayscale-min.js"></script>
當然了，如果你對實現的過程更感興趣，這裡提供js源代碼給大家：
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/blogs/764492/grayscale.js"></script>
註意：如果你引入到自己頁面後發現並木有生效，可能有以下原因，排除掉就好了：
1、按照方法引入的js沒被下載使用
因為上面用博客園上傳的，你引入時被博客園伺服器拒絕了，所以推薦大家放到自己伺服器上，然後再引入網頁。
那如果“我就要用博客園的怎麼搞？”
請在網頁上方添加這個參數：<meta name="referrer" content="never">
2、引入了js發現網頁里有的圖片在IE10或IE11中怎麼還是彩色的？
請檢查一下圖片的url，看是不是引用的功能變數名稱不屬於當前頁面的父級網址，比如網頁引入了百度的logo，跨域的話是不行的，當然，如果有大佬可以將這個js改為支持跨域處理的，歡迎分享出來供大家使用。
上述就是今天的成果，將css和js文件同時結合使用，便能做到全覆蓋的相容各個瀏覽器進行網頁變黑白啦，感謝你長得這麼帥&美還看完了本文~
