将网页反转成黑白色调

发表于 | 更新于 | 阅读次数 1
在一些特殊场景下将网页反转成黑白色调

在一些全国性哀悼的节日里，如2020年4月4日清明节，举行全民哀悼以纪念那些在新冠疫情中牺牲的同胞。

许多全民级的APP（如腾讯视频、爱奇艺、网易云音乐、百度等）都将首页设置成了黑白调，以此来缅怀和致敬那些逝去的人民和英雄。

那么网页能否实现这一点呢？答案当然是可以的。

直接给 html 设置如下的样式，就可以将图片和彩色文字改成黑白调。如果只希望图片变成黑白调，全局设置img样式即可。

1
2
3
4
5
6
7
8
html { 
  -webkit-filter: grayscale(100%); 
  -moz-filter: grayscale(100%); 
  -ms-filter: grayscale(100%); 
  -o-filter: grayscale(100%); 
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);  
  _filter: none; 
}

可以手动拷贝该代码，随便找个网址试试。