這幾天大家的電腦、手機(jī)各種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è)置，值默認(rèn)是0。
網(wǎng)頁整體變灰怎么實現(xiàn)?IE瀏覽器
上面所說的css3屬性IE瀏覽器并不支持，其實這樣做已經(jīng)覆蓋了大部分瀏覽器
filter: gray;
這個屬性直接加載html上是不管用的，如果需要圖片變灰可以只將樣式作用于img標(biāo)簽，或者用*通配符作用于所有元素，這樣整個網(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方法，然后對每個像素點進(jìn)行灰度轉(zhuǎn)換。
網(wǎng)頁整體變灰怎么實現(xiàn)?以上就是知了姐整理的三種常見方法，希望能夠?qū)δ愕膶W(xué)習(xí)有幫助。關(guān)注成都知了堂前端培訓(xùn)機(jī)構(gòu)，帶你了解更多前端相關(guān)問題。