一段css讓全站變灰

filter: grayscale 使用可以調整元素的灰度值

html {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}
兼容IE的辦法

實現辦法是引入grayscale.js，Demo下載 grayscale.js Demo

簡單查看了該js的源碼後發現會將color、background-color、borderColor等屬性提取出來後替換成灰色，background-image和圖片會使用canvas繪製處理成灰色再替換成處理後的圖片源

demo內functions.js則是對判斷瀏覽器userAgent來識別瀏覽器類型與版本，做出對應的處理