2020.04.04 国家把这天定为全国哀悼日后, 你会发现好多网站的网页变灰了!!!
那么具体是怎么实现的呢?
其实只要全局给 html 或者 body 添加个样式就可以啦
一, 类名添加法, 代码如下
- .grayColor{
- -webkit-filter: grayscale(100%);
- -moz-filter:grayscale(100%);
- -ms-filter:grayscale(100%);
- -o-filter: grayscale(100%);
- filter: grayscale(100%);
- }
把类名添加到 HTML 或 body 上就可以啦
二, 行内样式法
网易云音乐采用的是这种方式, 下面是他们的代码
- <style>
- HTML {
- /* 兼容 FF*/
- 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.333 3 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
- /* 兼容 IE 内核 */
- filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
- /* 兼容其它, 谷歌之类的 */
- -webkit-filter: grayscale(1);
- }
- </style>
来源: http://www.bubuko.com/infodetail-3492762.html