這幾天大家的電腦、手機各種app首頁整體變灰，這種現象怎么實現呢?一起來看看前端開發一定會的三種方法。
網頁整體變灰怎么實現?CSS3 filter(濾鏡) 屬性
html{
-webkit-filter: grayscale(); /* Chrome, Safari, Opera */
filter: grayscale();
}
filter 屬性定義了元素(通常是)的可視效果(例如：模糊與飽和度)。
瀏覽器支持：
grayscale()：
將圖像轉換為灰度圖像。值定義轉換的比例。值為則完全轉為灰度圖像，值為0%圖像無變化。值在0%到之間，則是效果的線性乘子。若未設置，值默認是0。
網頁整體變灰怎么實現?IE瀏覽器
上面所說的css3屬性IE瀏覽器并不支持，其實這樣做已經覆蓋了大部分瀏覽器
filter: gray;
這個屬性直接加載html上是不管用的，如果需要圖片變灰可以只將樣式作用于img標簽，或者用*通配符作用于所有元素，這樣整個網站就會變灰。
經測試，在IE7-9都是沒問題的，IE9以上不能生效。
網頁整體變灰怎么實現?通用方案
如果你執意所有的瀏覽器都有這個效果，可以通過Greyscale.js實現：
在頁面引入js文件：
然后：
grayscale(document.getElementsByTagName("img"));
或者直接這樣：
grayscale(document.getElementsByTagName("html"));
實現原理：IE瀏覽器下是添加灰度濾鏡，這個大家都懂的。其他瀏覽器貌似使用Canvas中的getImageData方法，然后對每個像素點進行灰度轉換。
網頁整體變灰怎么實現?以上就是知了姐整理的三種常見方法，希望能夠對你的學習有幫助。關注成都知了堂前端培訓機構，帶你了解更多前端相關問題。