整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
用场景
全部网页变成灰色(黑白色)，那么今天就说说，通过几行简单的代码，来实现这个功能。
万法一：
第一种:修改CSS文件
我们可以在网页的CSS文件中添加以下的CSS代码，来实现网页黑白色，也就是网站变灰
html {
fiter. progid:DXlmage Transtorm.Microsoft Basiclmage(grayscale=1);
-webkit- fiter: grayscale(100%);
结果效果:
TBD
第二种:在网页的<head>标签内加入以下代码
如果你不想改动CSS文件，你可以通过在网页头部中的<head>标签内部加入内联CSS代码的形式实现网站网页变灰
<style type="textcss">
html
fliter. progid:DXlmageTransform.Microsoft. Basiclmage(grayscale=1);
-webitfilter. grayscale(100%)}
</style>
结果效果:
TBD
第三种:修改<html>标签加入内联样式Q
如里上面的两种方式都不喜欢，可以通过修改<html>标签，以加入内联样式的方法，达到网页变灰的效果
<html style="liter. progid:DXlmage Transform.Microsoft. Basiclmage(grayscale=1);
-webi-fiter: graysale(100%)"*>
结果效果:
TBD
第四种:这里使用的CSS代码
body *{
-webi-fiter: grayscale(100%); |* webkit */
-mz-fiter: grayscale(100%); /firefox*/
-ms-iter. grayscale(100%); Pie9*/
-iter. grayscale(100%); *opera*/
fiter. grayscale(100%);
fiterprogid:DXlmage Transform.Microsoft Basiclmage(grayscale=1),
fitrgray; /ie9-*/ P但是这行代码是为了兼容IE,虽然-行代码很少，但是效果并不好，而且网页比较卡不推荐使用[即删除],同时
发现, csdn,京东,淘宝也都没有兼容IE11浏览器*/
结果效果:
TBD
以上几种方法，都是通过CSS的滤镜来控制页面的显示而已，唯一不同的就CSS代码调用的方式
方法二
同时支持IE和Chrome, Safari,但是不支持Firefox.
html {overflow-yQ siolitereprogir:DXlmnageTransform.Microsoft. Basiclmage(grayscale=1)-webit-fiter graysale(100%);}
补充:
body{
fitergray
说明:此方法支持IE,不支持Firefox和Chrome等非1E内核浏览器。
方法三
使用grayscale. js插件
使用grayscale.js插件。这个插件是模拟lE的iterprogid方法。
使用方法方法:
grayscale.js插件源文件: htp://c/. baiwanzhan. comjs/gray_ baiwanzhan.js
window. onload=function({
grayscale(document body);
说明:支持IE、Safari. Chrome. Opera和Firefox等浏览器。
问题:这个在IE下也挺占资源的。
方法四
找到你的CSS文件然后修改css代码文件。在以下的文件当中
form,diy,span,img,ul,ol,li,
加入filter. Gray;
总结:
建议:使用方法3，虽然不支持更多的浏览器，但是稳定、速度快，而且资源占用小。
悼日打开各个网站，发现网页都变成灰色了。今年国家经历了非常惨痛的时刻，有很多烈士英雄保卫人民的安危遇难，昨天全国下降半旗，北京时间 10 点全国默哀三分钟，来致敬英雄们。为了深切哀悼在抗击新冠肺炎斗争中的牺牲烈士和逝世同胞，4月4日0点起，全国多家网站和移动端，比如百度、优酷、爱奇艺、哔哩哔哩、抖音、快手、斗鱼和CSDN等平台给出公告称：2020年4月4日全国性哀悼活动期间，停止今天一切公共娱乐活动。
来自youku
随便打开这些任何一个网站，全站的内容都变成了灰色，包括按钮、图片等等。相信这时候从事程序开发的粉丝可能会好奇这是怎么做到的呢？
来自csdn
其实解决方案很简单，只需要几行代码就能搞定了。从事前端开发的朋友会以为所有的内容都统一换了一个 CSS 样式，图片也全换成灰色的了，按钮等样式也统一换成了灰色样式。如下图，有一个灰色样式：[filter: grayscale(100%);]，也许就是这一个样式控制着整个网页显示效果。
来自csdn
现在试着关掉这个样式，会发现整个csdn页面恢复了往常的红色主题，包括网站logo、图片和按钮都恢复了。
来自csdn
总结上面的实验效果，果然是这个样式在起作用，而且是全局的效果，因为它是作用在了 html 这个节点之上的。只要修改这部分CSS代码：
当然这种修改CSS的方式还有很多，我们可以在Mozilla发布的样式效果测试平台上看看 filter 这种不同层叠样式效果。
平台地址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
来自于developer.mozilla
通过这几个用力可见通过 filter 样式改变了图片、颜色、模糊、对比度等等信息。官网介绍了一些语法：
设置一种函数，方法如下：
如果对层叠样式感兴趣的朋友可以阅览下官网的说明文档：
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter
除了这些开发样式调整的方法以外，还可以走系统架构角度解决网页的显示问题，通常很多大型网站都用上了反向代理nginx服务器，所有网站访问，都要通过nginx代理去访问到网页内容。
来自baidu
既然这样，统一在nginx服务器上做一些配置也是可行的，之前某大神的博客说“在Nginx负载均衡服务器上，利用sub_filter指令在输出的HTML中增加一行如下代码：
<style type="text/css">html {filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }style>
nginx配置修改效果如下：
来自csdn
小编到这里就简单介绍了一下哀悼日观察到的网站变灰的实现，也学习了 filter 的更详细的用法，希望能给有相同兴趣的粉丝带来一些帮助。
关注优逸客微信公众号（sx-uek）预约优逸客免费学习名额，在互联网行业找到适合自己学习的技术方向，实现高薪就业！
2020 年 4 月 4 日，全国和驻外使领馆下半旗志哀，全国停止公共娱乐活动。4 月 4 日 10 时起，全国人民默哀 3 分钟，汽车、火车、舰船鸣笛，防空警报鸣响。
响应国家号召，各大网站全站灰色调哀悼。
下方是给各位网友提供全站变灰教程
网站灰色调教程
给大家分享一条代码实现网站变成灰色调，十分简单。支持 Chrome 浏览器、新版 Edge 浏览器以及 Firefox 浏览器
<link type="text/css" rel="stylesheet" href="https://www.xjisme.com/usr/uploads/2020/04/AllGray.css"/>将这一段代码加入主题的 header.php 的 或 index.php / index.html 的 前，保存即可，包括网站的广告、图片等等，整个网页变成了灰色调。
*请认真填写需求信息，我们会在24小时内与您取得联系。
