[ 本站:https://jwt1399.top ] 4月4日全天變灰，向逝去生命致以崇高敬意！
CSS filter
filterCSS 屬性將模糊或顏色偏移等圖形效果應(yīng)用于元素。濾鏡通常用于調(diào)整圖像，背景和邊框的渲染。
全站變灰
今天很多網(wǎng)站都變灰了，比如簡(jiǎn)書、B 站、愛奇藝、CSDN 、百度等等。
我們選擇一個(gè)網(wǎng)站，比如 B 站吧，打開瀏覽器開發(fā)者工具。審查一下網(wǎng)頁(yè)的源代碼，我們可以發(fā)現(xiàn)在 html 的這個(gè)地方多了一個(gè)疑似的 class，叫做 gray（灰色）
可以看到，我們只要將下面 CSS 樣式，加入到頁(yè)面指定節(jié)點(diǎn)，即可實(shí)現(xiàn)網(wǎng)頁(yè)變灰的效果，我們將其取消，就能發(fā)現(xiàn)網(wǎng)站的顏色就能重新還原回來(lái)了。
html.gray {
-webkit-filter: grayscale(.95);
}
grayscale 取值為 0%-100%，也可以用 0-1 取代，0%代表彩色圖像，100%代表完全的灰度。
另外看看我自己的站點(diǎn)，我用的也是這個(gè) CSS 樣式
因?yàn)橹皇墙裉彀У慷虝河靡还?，所以我直接放到?code><head>里面，其完整內(nèi)容為：
<!--放到<head></head>之間即可-->
<style type="text/css">
html{
filter: grayscale(100%); /* 標(biāo)準(zhǔn)寫法 just for IE6-9 */
-webkit-filter: grayscale(100%); /* webkit 內(nèi)核支持程度較好 */
-moz-filter: grayscale(100%); /* 其他內(nèi)核現(xiàn)在并不支持，為了將來(lái)兼容性書寫 */
-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>
這個(gè)實(shí)現(xiàn)方法兼容性會(huì)更好一些。
或者直接調(diào)用別人寫好的
<link ; rel="stylesheet" type="text/css" />
非全站變灰
我們可以將需要使用filter的元素單獨(dú)加上
<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打開發(fā)現(xiàn)網(wǎng)頁(yè)并沒(méi)有變灰，IE是不支持filter屬性的,但是影響并不大啦
參考：一段css讓全站變灰的代碼總結(jié)
參考：圖像灰度(grayscale)實(shí)現(xiàn) 各瀏覽器實(shí)現(xiàn)方式
參考：如何用一行代碼實(shí)現(xiàn)網(wǎng)頁(yè)變灰效果？
