整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
用場景
全部網頁變成灰色(黑白色)，那么今天就說說，通過幾行簡單的代碼，來實現這個功能。
萬法一：
第一種:修改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小時內與您取得聯系。
