這幾天大家的電腦、手機各種app首頁整體變灰，這種現(xiàn)象怎么實現(xiàn)呢?一起來看看前端開發(fā)一定會的三種方法。

網(wǎng)頁整體變灰怎么實現(xiàn)?CSS3 filter(濾鏡) 屬性

html{

-webkit-filter: grayscale(); /* Chrome, Safari, Opera */

filter: grayscale();

}

filter 屬性定義了元素(通常是)的可視效果(例如：模糊與飽和度)。

瀏覽器支持：

grayscale()：

將圖像轉(zhuǎn)換為灰度圖像。值定義轉(zhuǎn)換的比例。值為則完全轉(zhuǎn)為灰度圖像，值為0%圖像無變化。值在0%到之間，則是效果的線性乘子。若未設(shè)置，值默認是0。

網(wǎng)頁整體變灰怎么實現(xiàn)?IE瀏覽器

上面所說的css3屬性IE瀏覽器并不支持，其實這樣做已經(jīng)覆蓋了大部分瀏覽器

filter: gray;

這個屬性直接加載html上是不管用的，如果需要圖片變灰可以只將樣式作用于img標簽，或者用*通配符作用于所有元素，這樣整個網(wǎng)站就會變灰。

經(jīng)測試，在IE7-9都是沒問題的，IE9以上不能生效。

網(wǎng)頁整體變灰怎么實現(xiàn)?通用方案

如果你執(zhí)意所有的瀏覽器都有這個效果，可以通過Greyscale.js實現(xiàn)：

在頁面引入js文件：

然后：

grayscale(document.getElementsByTagName("img"));

或者直接這樣：

grayscale(document.getElementsByTagName("html"));

實現(xiàn)原理：IE瀏覽器下是添加灰度濾鏡，這個大家都懂的。其他瀏覽器貌似使用Canvas中的getImageData方法，然后對每個像素點進行灰度轉(zhuǎn)換。

網(wǎng)頁整體變灰怎么實現(xiàn)?以上就是知了姐整理的三種常見方法，希望能夠?qū)δ愕膶W(xué)習(xí)有幫助。關(guān)注成都知了堂前端培訓(xùn)機構(gòu)，帶你了解更多前端相關(guān)問題。