[ 本站:https://jwt1399.top ] 4月4日全天變灰，向逝去生命致以崇高敬意！
CSS filter
filterCSS 屬性將模糊或顏色偏移等圖形效果應用於元素。濾鏡通常用於調整圖像，背景和邊框的渲染。
全站變灰
今天很多網站都變灰了，比如簡書、B 站、愛奇藝、CSDN 、百度等等。
我們選擇一個網站，比如 B 站吧，打開瀏覽器開發者工具。審查一下網頁的源代碼，我們可以發現在 html 的這個地方多了一個疑似的 class，叫做 gray（灰色）
可以看到，我們只要將下面 CSS 樣式，加入到頁面指定節點，即可實現網頁變灰的效果，我們將其取消，就能發現網站的顏色就能重新還原回來了。
html.gray {
-webkit-filter: grayscale(.95);
}
grayscale 取值爲 0%-100%，也可以用 0-1 取代，0%代表彩色圖像，100%代表完全的灰度。
另外看看我自己的站點，我用的也是這個 CSS 樣式
因爲只是今天哀悼短暫用一哈，所以我直接放到了<head>裏面，其完整內容爲：
<!--放到<head></head>之間即可-->
<style type="text/css">
html{
filter: grayscale(100%); /* 標準寫法 just for IE6-9 */
-webkit-filter: grayscale(100%); /* webkit 內核支持程度較好 */
-moz-filter: grayscale(100%); /* 其他內核現在並不支持，爲了將來兼容性書寫 */
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
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"); /* Firefox 3.5+ */
}
</style>
這個實現方法兼容性會更好一些。
或者直接調用別人寫好的
<link href="https://static.isenyu.cn/file/css/MemorialDay.css"; rel="stylesheet" type="text/css" />
非全站變灰
我們可以將需要使用filter的元素單獨加上
<html>
<body>
<div class="gray-filter"></div>
</body>
</html>
<style type="text/css">
.gray-filter {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
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");
}
</style>
CSS filter 的瀏覽器兼容
Chrome31+，Safari7+，Opera20+，ios Safari6+，Android Browser4.4+，Blackberry 10+均支持了-webkit-filter的方式，但是IE 不支持
用IE打開發現網頁並沒有變灰，IE是不支持filter屬性的,但是影響並不大啦
參考：一段css讓全站變灰的代碼總結
參考：圖像灰度(grayscale)實現 各瀏覽器實現方式
參考：如何用一行代碼實現網頁變灰效果？