2015-08-19

昨日是天津塘沽特大爆炸事件发生后的第七天。因为是头七，网上有许多人为死难者祈福，有的网站首页也换上灰色调以示默哀。尤其是爱奇艺，整个首页，包括图片都变成灰色。

iqiyi-gray.png

这是怎么实现的呢？分析当日的 CSS 文件，末尾有这么一段：

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,#grayscale");
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter:grayscale(1)
}

参考资料

1. CSS3 Filters: Altering HTML and Images with just CSS
2. CSS Filter
3. Edit CSS Filter