老铁们，大家好，相信还有很多朋友对于在哀悼日将整个网站的代码灰显的最简单方法是ng.和的相关问题不太懂，没关系，今天就由我来为大家分享分享在哀悼日将整个网站的代码灰显的最简单方法是ng.以及的问题，文章篇幅可能偏长，希望可以帮助到大家，下面一起来看看吧！
那么今天我就来说说如何通过几行简单的代码来实现这个功能。
类型一：修改CSS文件
我们可以在网页的CSS文件中添加如下CSS代码，使网页变成黑白的，即网站变成灰色。
代码
html {filter: progid:DXImageTransform.Microsoft.BasicImage（灰度=1）; -webkit-filter: 灰度(100%);}
第二：在网页的head标签中添加以下代码
如果您不想更改CSS 文件，可以通过在网页标题的head 标签内添加内联CSS 代码来使网站页面变灰。
代码
style type=’text/css’html {filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter:grayscale(100%);}/style
第三种方法：修改html标签添加内联样式
如果不喜欢上面的两种方法，可以修改html标签添加内联样式，达到网页变灰的效果。
代码
html style=’filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter:grayscale(100%);’
代码：
正文*{-webkit-filter: 灰度(100%); /* webkit */-moz-filter: 灰度(100%); /*firefox*/-ms-filter: 灰度(100%); /*ie9*/-o -filter: 灰度(100%); /*opera*/filter: 灰度(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(灰度=1);滤镜：灰色； /*ie9- */}
第五：通过nginx将网站灰化
在Nginx 负载平衡服务器上，使用sub_filter 指令向输出HTML 添加一行。
这将使所有网站在IE和IE核心浏览器下变成灰色。步骤如下：
1.重新编译Nginx并添加http_sub_module模块：
–with-http_sub_module
2. 在nginx.conf 配置文件的http {.} 大括号内添加以下两行：
sub_filter ‘/head’ ‘style type=’text/css’html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}/style’;sub_filter_once on;
3.保存后，重新加载配置文件：
/usr/local/nginx/sbin/nginx -t /usr/local/nginx/sbin/nginx -s 重新加载
这样整个页面就变成灰色了。
原创文章，作者：小su，如若转载，请注明出处：https://www.sudun.com/ask/153652.html
用户评论
夏日倾情
我记得以前看一些站点在重要日子会用这样的方法显示哀悼，现在这个操作也还挺应景的。不过确实，用代码实现的方式是最直接的，ng 的框架也在这方面表现不错。
有6位网友表示赞同！
掉眼泪
哎，网站全站变灰这种做法虽然比较旧fashioned了，但倒是一眼就能明白怎么回事儿，真切地传达出哀悼的情绪。而且操作起来的确像说的那样简单方便。 确实，用代码做实现是最好的方法，直接明了又高效。
有11位网友表示赞同！
隔壁阿不都
这网站的页面感觉突然有点阴沉了… 不过这“变灰”的操作真的很有纪念意义啊，虽然有点简单粗暴，但能够立马让用户知道发生了什么事挺好。 这种小细节的设计确实值得学习
有18位网友表示赞同！
你很爱吃凉皮
哎呦喂，网页变成这样还让我有点瘆得慌呢！感觉像是进入了一个黑白的世界。不过，这的确是最直接的代码实现方式了，ng 的框架确实是方便快捷!
有16位网友表示赞同！
命运不堪浮华
啊？网站全变灰？这不是太沉重了吧，虽然是哀悼日想表达思缅的情绪，但这种过于悲伤的方式会不会让网站显得有点压抑呢？我更倾向于一些温和的表达方式…
有18位网友表示赞同！
米兰
这几天确实有很多网站都用了一种类似的方法来纪念哀悼日。但我觉得全站变灰有点像在故意营造一种悲观的氛围吧！毕竟，网页设计还应该注重用户体验感啊。
有18位网友表示赞同！
仅有的余温
这段代码还真是简洁有效啊！以前在一些论坛上看过这种实现方式，现在看网站采用这个方法也挺巧妙的，确实能迅速传达哀悼信息。ng 的框架确实好用!
有18位网友表示赞同！
颓废人士
这个代码设计很符合哀悼日的主题，直接用颜色变化就能表达出悲伤的情绪。但是从用户的角度来说，如果网站一直保持灰色的状态会让人感觉有点沉压和不舒服…
有10位网友表示赞同！
ヅ她的身影若隐若现
我觉得这种全站变灰的方式还是比较粗糙的，并没有足够的艺术性和细致度。哀悼日更应该展现一种尊重的氛围，比如可以使用一些特殊的色彩变化或者图片作为元素，让网页显得更加庄严肃穆。
有14位网友表示赞同！
封锁感觉
虽然代码实现很简单方便，但用这么直接的方法表达哀悼会显得有点单调和缺乏深度吧！是不是可以加入一些其他的元素来丰富网站的内容，增强用户的代入感呢？比如说一些哀悼短语、图片或者视频等等。
有16位网友表示赞同！
陌上花
我感觉这种变灰的页面设计还是有点儿落后了，现在应该更侧重于用户体验和互动性。使用更加智能化的方式来表达哀悼，也许会有更好的效果？ 比如用网页特效、声音或者动画来营造一种庄严的气氛。
有8位网友表示赞同！
巷雨优美回忆
确实，现在的网站越来越注重美观性和用户友好性了，全站变灰这种简单粗暴的方法应该是个时代 relic 了。我们可以借鉴一些其他的设计元素，让哀悼日表达更加深刻且优雅。
有20位网友表示赞同！
╯念抹浅笑
虽然代码实现简单有效，但如果滥用的话，可能会让页面看起来很混乱和缺乏层次感。哀悼日的设计应该更加注重细节和美感，才能更有效地传达用户的感受和情感。
有14位网友表示赞同！
如梦初醒
网站全变灰的设计其实很容易让人分心和阅读不顺畅。应该在设计时考虑如何保留关键信息的同时，又能展现出哀悼的情绪。比如可以局部使用灰黑色调，或者加入一些特殊的视觉元素来突出重点。
有6位网友表示赞同！
醉枫染墨
我觉得代码实现的方式虽然简单直接，但并不一定是最合适的表达方式。我们可以考虑使用更具创意和艺术性的方法来设计哀悼日页面，让它更具有文化内涵和情感共鸣。
有8位网友表示赞同！