大家應該有發現最近幾天不少網站變成了黑白色，在哀悼日時，很多網站都需要全站變成黑白配色，今天對這個實作的技術做了一些探索性了解，在此進行一個記錄分享，
使用的樣式部分：下面的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://www.cnblogs.com/brad93/p/https://blog-static.cnblogs.com/files/blogs/764492/grayscale-min.js"></script>
當然了，如果你對實作的程序更感興趣，這里提供js源代碼給大家：
<script type="text/javascript" src="https://www.cnblogs.com/brad93/p/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檔案同時結合使用，便能做到全覆寫的兼容各個瀏覽器進行網頁變黑白啦，感謝你長得這么帥&美還看完了本文~??
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/539060.html
標籤：Html/Css