示例

我选择了几个网站，先来看看它们是如何实现网站变灰效果的。

B站

html.gray {-webkit-filter: grayscale(.95);
}

百度网盘

body {filter: grayscale(100%);
}

百度

body.qm-activity #head_wrapper, body.qm-activity #s_menu_gurd, body.qm-activity #u1, body.qm-activity #u_sp, body.qm-activity .s-ctner-menus .s-menu-item-underline, body.qm-activity .s-news-rank-content, body.qm-activity .s-news-wrapper .s-news-list-wrapper .hot-point, body.qm-activity .s-news-wrapper .s-news-list-wrapper:nth-child(-n+3) img.s-news-img, body.qm-activity .s-top-left.s-isindex-wrap {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%);filter: gray;
}

360官网

html {filter: progid:DXImageTransForm.Microsoft.BasicImage(grayscale=1);-webkit-filter: saturate(0);
}

掘金

html.mourning {-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);filter: #808080;
}

网易官网

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;
}

淘宝

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

网易云音乐

html {filter: url(data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter i…0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale);-webkit-filter: grayscale(1);
}

代码分析

综合以上各个示例，可以发现它们的实现网站变灰效果的代码都是通过filter属性实现的，不过有一些代码会加上一些浏览器的私有属性进行兼容，比如-webkit等。

在这些示例中，filter属性的赋值大致有两种（url和颜色除外）：grayscale和saturate。

grayscale

对图片进行灰度转换, 它是 <filter-function> 的子属性。

语法

grayscale(amount)

参数

mount：转换值的大小, 可以是<number> 或 <percentage>. 当值为100%时, 灰度最大. 0%时与原图没有区别. 0% 到 100% 之间的值会使灰度线性变化. amount 为空时会自动插入0.

saturate

该CSS功能是使输入图像超饱和或去饱和。

语法

saturate(amount)

参数

amount：转换量，指定为<number>或<percentage>。值100%过低会使图像去饱和，而值过高则会使图像100%饱和。值0%完全不饱和，而值100%保持输入不变。内插的lacuna值为1。

在这些代码里面，有一项对filter的赋值比较特殊：progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);，一眼看上去会感觉这个属性值的特别奇怪，在grayscale的外层包裹着一大串对象，其实这个属性值是为了兼容IE浏览器。

总结

一般使用css的filter属性使网站变色。但是css滤镜是比较消耗浏览器性能的，所以在非必要的情况下，不要使用css滤镜。

另外，大部分网站都是将filter属性挂载到了html标签上，但是百度却挂载到了body标签上。根据过往经验判断，在当前使用场景下，还是更推荐将filter属性挂载到html标签上。

参考

filter - CSS（层叠样式表） | MDN

如何使用css实现网站变灰效果相关推荐

html页面整体变灰,CSS + JS 网站变灰（变黑白），兼容所有浏览器。
有的网站可能需要用到全站黑白功能(一般常用于悼念日) ,最方便就是增加css代码,但经测试不兼容IE10.11浏览器,所以配合grayscale.js这个插件,可以完美兼容所有浏览器,这里我制作了个一 ...
网站变灰CSS，多浏览器兼容版本
网站变灰CSS,多浏览器兼容版本: <style> body *{ -webkit-filter: grayscale(100%); /* webkit */ -moz-filter: g ...
一行css代码让整个网站变灰, 通过js控制定点触发和关闭
今天是5.12是个特殊的日子,有的时候吧会把整个网站变灰的需求这个我们用css过滤器一行代码就能实现了 filter: grayscale(100%); 问题是出在定点触发这块,我们可以通过 ...
如何用一行代码实现网页变灰效果？
今天是 2020 年 4 月 4 日,星期六,清明节. 我们的国家经历了非常惨痛的时刻,很多英雄在救助他人的路上倒下,更有很多烈士英雄保卫人民的安危遇难,今天全国下降半旗,北京时间 10 点全国默哀三 ...
网站变灰代码，一行代码让网站整体变灰，wordpress网站一行代码全站变灰教程
在遇到特殊情况的时候,我们作为站长需要紧急将网站变灰的需求,在此小编给大家总结了几种方法,通过简单修改一下站点样式即可实现.一段代码让网站整体变灰.这里主要介绍的利用 filter: grayscal ...
怎么把php网站变灰,让自己的网站的全部网页变成灰色（黑白色）
让自己的网站的全部网页变成灰色(黑白色) 第一种:修改CSS文件我们可以在网页的CSS文件中添加以下的CSS代码,来实现网页黑白色,也就是网站变灰 CSS代码 html { filter: prog ...
技术大揭秘：百度、淘宝、QQ那些官网如何就只用一行代码实现网页变灰效果？...
转自进击的Coder,作者崔庆才今天是 2020 年 4 月 4 日,星期六,清明节. 我们的国家经历了非常惨痛的时刻,很多英雄在救助他人的路上倒下,更有很多烈士英雄保卫人民的安危遇难,今天全国下降 ...
CSS 使网页变灰(文字加动画)
如果需要使网站变灰,在网页上加层滤镜就可以了. 1 html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } ...
html 图片变灰,科技常识：css使图片变灰的实现方法
今天小编跟大家讲解下有关css使图片变灰的实现方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关css使图片变灰的实现方法的相关资料,希望小伙伴们看了有所帮助. 如果您是想将页面网页 ...

如何使用css实现网站变灰效果

目录

示例

代码分析

grayscale

saturate

总结

参考

如何使用css实现网站变灰效果相关推荐

最新文章

热门文章