2015-08-19

2015-08-19  本文已影响0人  阿牛故事

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

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,<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)
}

参考资料

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

猜你喜欢

热点阅读