網站頁面黑白色濾鏡效果實現技巧

一、前言

在很多時候我們需要把整個網站變灰，比如“致敬”。來看看網站是如何實現整體變灰的。

人的一生是短暫的，重要的是能夠在短暫的時間內造就無限的價值。由衷的表示致敬我們將永遠銘記！

如果首頁html換成黑白風格的，這個好實現?？墒敲總€封面圖都重新做一張黑白的版本，每個都是用戶自己的投稿啊，怎么保證封面圖都能黑白色呢？后期靠人工換的話，那代價也大了，而且也很傻。

二、解密HTML如何將網站變為黑白

眾所周知我們平時使用的網站都是IT從業者辛勤勞動所創造出來的，其實創造一個黑白網頁其實并不難，真的很簡單，因為只需要一行代碼。

html {-webkit-filter: grayscale(100%);}

是的你沒看錯就這一行一個網頁就變成了一個灰度圖

下面我將進行一次簡單的演示

這是一個非常簡單的一段HTML代碼

突然我發現在html根結點html標簽下面有一個屬性：filter: grayscale(1);

這是一個非常簡單的一段HTML代碼

html{
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}

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

瀏覽器支持：

grayscale()：

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

三、IE瀏覽器

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

filter: gray;

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

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

四、通用方案

如果你執意所有的瀏覽器都有這個效果，可以通過Greyscale.js實現：

在頁面引入js文件：

<script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script>

然后：

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

或者直接這樣：

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

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

因此，在現代瀏覽器下，對于該方法，圖片的灰度處理有兩個局限性：

1. 速度。300*300這張一般般大小的圖片變灰就要數秒之久；

2. 跨域。安全性機制，無法轉換跨域的圖片為黑白色。

五、更多

除了黑白色，我們還可以實現別的效果嗎？是可以的，請注意filter屬性，MDN如是說：

filter CSS屬性將模糊或顏色偏移等圖形效果應用于元素。濾鏡通常用于調整圖像，背景和邊框的渲染。

模糊度： filter: blur();

對比度：filter: contrast();

色相旋轉：filter: hue-rotate(); 

陰影： filter: drop-shadow() ;