公祭日网站变灰白色效果 [淘宝-京东]

476 阅读1分钟

南京公祭日是12月13日。 为祭奠在日本侵华战争中南京大屠杀遇难的同胞,经第十二届全国人大常委会批准决定,将每一年12月13日确定为“南京大屠杀死难者国家公祭日”

image.png

image.png

image.png

大家看到了全站或者是网站首页的所有内容都变成了灰白色了,这是怎么做到的呢? 是做了俩套不同样式的页面吗亦或是在关键时刻重写了CSS 样式了吗?错 错 错这些想法都不对,真要是这样那成本就太高了,再说了如果在改写样式的过程中有某一疏漏这样就太突兀了,给网民用户也带来了一些不好的体验;

其实解决方案很简单,只需要短短几行代码就解决了。

html{
        filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%);
      }

添加了以上代码网站就可以变成达到预想的比较肃穆的效果 其他网站的实现方案,思路基本相同,就是根据自己的不同的浏览器兼容需求略微做一些调整即可