APP及網站快速變黑白灰色的方法

多人在打開支付寶、淘寶、美團、、小紅書等軟件APP的時候，都會發現首頁變成了黑白色吧

朋友圈里都是大家的紀念、歌頌、緬懷；像父母那代人更是感情真誠熱烈，對于他們來說，江老的離開也像是一個時代的結束......

騰訊主頁如何做的？

相信今天大家都發現了，大部分網站的頁面都已經變成了黑白色來悼念逝去的人們，那么站在前端開發者的角度，這個效果是怎么做出來的呢？頁面中有那么多的文字和圖片，難道要一個個改顏色嗎？讓我們一起來看看國內領先的騰訊公司是怎么做的。

首先我們打開騰訊網的首頁，按F12進入瀏覽器控制臺，強哥猜測應該是改的整體的樣式，估計是在body標簽上直接加的樣式。

果然，我們可以看到在首頁的body標簽上有一個名為garyBody的class（這里我們猜測可能是開發小哥哥手誤把gray灰色的英文敲成了gary），然后這個類名的css是下面這樣的：

原來道理十分簡單，騰訊是使用了CSS3中的filter濾鏡，并把它設置為grayscale來實現這個功能，只要把grayscale設置為100%就可以把文字和圖片在內的所有元素都變成黑白色（100%灰度）了，當然在實際工作中，這個百分比都是可以根據需求來自行更改的。另外考慮到瀏覽器兼容性的問題，我們還需要給filter加上瀏覽器前綴比如-webkit,-moz等等以適應不同的瀏覽器，我們可以看到騰訊的代碼中已考慮到了當前主流的瀏覽器。

當我們把這個名為garyBody的class去掉之后，我們就可以發現騰訊網又恢復成往日的彩色了。隨后我們又去了淘寶、百度等幾個主流網站看了一下，發現也都是用的幾乎一樣的方法。

當然了，filter這個屬性的功能可遠遠不止這一點，除了grayscale，我們還可以把filter設置成blur(px),這是給頭像設置高斯模糊，設置的px越大就會越模糊，我們來看看設置成3px時的效果：

是不是有點意思呢？除了blur模糊度之外，我們還可以設置亮度brightness(%),默認是100%，我們看看只有40%時候的效果：

當然了，filter的功能還遠遠不止這些，比較常用的還有contrast(%)對比度，drop-shadow陰影等等，更多的使用方式大家可以自行查閱相關的文檔，這里強哥只是拋磚引玉而已。怎么樣，今天是不是又學到了一招呢？

最后讓我們再一次致敬那些為人類獻身的英雄們，愿逝者安息，愿生者奮發，愿祖國昌盛！

第一種：修改 CSS 文件

我們可以在網頁的 CSS 文件中添加以下的 CSS 代碼，來實現網頁黑白色，也就是網站變灰

CSS 代碼

html {


filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);


-webkit-filter: grayscale(100%);}

第二種：在網頁的標簽內加入以下代碼

如果你不想改動 CSS 文件，你可以通過在網頁頭部中的標簽內部加入內聯 CSS 代碼的形式實現網站網頁變灰

代碼

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

html{ 
filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,#grayscale"); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);
}

有一些站長的網站可能使用這個 css 不能生效，是因為網站沒有使用最新的網頁標準協議

請將網頁最頭部的替換為以上代碼。

第三種：修改標簽加入內聯樣式

如里上面的兩種方式都不喜歡，可以通過修改標簽，以加入內聯樣式的方法，達到網頁變灰的效果

代碼

<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);


-webkit-filter: grayscale(100%);">

第四種：本人用的 CSS 代碼

代碼：

body *{-webkit-filter: grayscale(100%); /* webkit */-moz-filter: grayscale(100%); /*firefox*/-ms-filter: grayscale(100%); /*ie9*/-o-filter: grayscale(100%); /*opera*/filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); filter:gray; /*ie9- */}

PS：以上幾種方法，都是通過 CSS 的濾鏡來控制頁面的顯示而已，唯一不同的就 CSS 代碼調用的方式。各位，喜歡哪種就自己挖去吧！

附：實現后的效果如下圖所示

- END -

先打開快捷指令

1，新建快捷指令

2，添加操作“打開app”

3，選擇你要換圖標的APP

4，點擊右上角設置按鈕

5，添加到主屏幕上，

6，點擊輸入欄中的框框即可更換圖標，隨后添加桌面即可。

但是呢用快捷指令建設的桌面圖標，打開會有彈窗通知。我們可以用下列方法解決。

1，打開快捷指令自動化，創建個人自動化。

2，選擇打開APP

3，選取替換APP圖標的APP。ps：這里可以選擇多個APP

4，點擊添加操作，

5，選取“位置”，“過濾位置”

6，點擊下一步

7，關閉運行前詢問

8，單擊完成即可。

免得待會兒快捷指令亂七八糟，建議先創建個快捷指令文件夾。

https://item.m.jd.com/product/100026667904.html?gx=RnFjlmJdbj3dy9RP--sBAPnf-GicLmpnpMvN0Kk&ad_od=share&utm_source=androidapp&utm_medium=appshare&utm_campaign=t_335139774&utm_term=CopyURL

一個好的編輯器我們可以方便的開發項目，編寫代碼，配置和管理我們的項目。所以我們開始編寫html代碼之前需要搭建開發環境。

基于html項目的開發和代碼編寫現在網上有很多編輯器，也有免費的，也有收費的編輯器。基于在Windows系統環境下開發和編寫html代碼最簡單的編輯器就是Windows自帶的記事本，我們可以使用記事本編輯html代碼。

使用記事本編寫html的步驟是首先新建一個文本文檔，按照html的語法規則編寫相關的代碼和保存文件，然后把文件的后綴名改為.html，使用電腦上的瀏覽器打開就可以查看我們代碼的運行結果。

雖然記事本也能編寫html代碼，但是效率不高也不方便，所以我們使用專業的編輯器來開發項目，編寫代碼和管理項目。

常用html代碼編寫的免費軟件有HBuilderX，vs code，Sublime Text 等等。

HBuilderX官網下載地址：

https://www.dcloud.io/hbuilderx.html

vs code的官網下載地址：

https://code.visualstudio.com/

Sublime Text官網下載地址：

http://www.sublimetext.com/

我們以后的教程都使用HBuilderX，所以下面為了同學們的學習方便，對HBuilderX的下載和安裝做詳細的教程。

一，下載

首先訪問HBuilderX的官網網址：

https://www.dcloud.io/hbuilderx.html

打開上面的HBuilderX下載網址后點擊頁面上download，在彈出的對話框里選擇適合自己電腦的HBuilderX版本下載。

在Windows10環境下下載后的文件是一個壓縮的.zip文件。

二，安裝

鼠標右擊下載下來的壓縮文件進行解壓。

解壓完成后是一個名為HBuilderX的文件夾。

解壓完成后鼠標雙擊HBuilderX文件夾：

雙擊運行名為HBuilderX.exe的應用程序文件即可啟動HBuilderX編輯器：

因為HBuilderX是一個綠色軟件所以沒有桌面快捷方式和開始菜單快速啟動程序，我們可以右擊HBuilderX.exe文件創建桌面快捷方式。

小百科：

綠色軟件指一類小型軟件，多數為免費軟件，最大特點是軟件無需安裝便可使用，可存放于閃存中，移除后也不會將任何記錄留在本機計算機上。通俗點講綠色軟件就是指不用安裝，下載直接可以使用的軟件。綠色軟件不會在注冊表中留下注冊表鍵值，所以相對一般的軟件來說，綠色軟件對系統的影響幾乎沒有，所以是很好的一種軟件類型。

三，新建項目

HBuilderX編輯器初次啟動時的默認界面是下圖所示：

按照下圖所示可以創建一個新的名為demo1空白項目：

名為demo1的空白項目創建成功后的界面如下圖所示：

接下來在剛我們新建的demo1項目下創建名為helloworld的html文件

鼠標右擊創建的demo1項目選擇新建在選擇.html文件：

在彈出的對話框里填入html文件的名稱：

編寫一段代碼：

運行：

在瀏覽器上觀察效果：

好了，到這里html的開發環境搭建和HBuilderX的安裝教程結束了。

下面再給大家教一下怎樣修改HBuilderX的主題風格，HBuilderX自身提供了修改軟件主題的功能，使用者可以自身需求和喜好修改HBuilderX的風格。在喜歡自己喜歡的環境下做開發也是令人羨慕的一件事。

按照一下步驟可以修改HBuilderX的主題，默認主題是綠柔，我們可以改成雅黑，雅藍或者自定義主題：

雅黑主題：

雅藍主題：

好了本節全部內容全部結束了，希望我準備的內容對你有所幫助

你的支持是我的最大動力，若覺得我的教程還可以對你有幫助為我點贊加關注！謝謝！

在線咨詢

上一篇：Vue 2使用moment.js格式化時間
下一篇：D3.js實戰教程：4 繪制直線、曲線和圓弧

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

APP及網站快速變黑白灰色的方法

您的項目需求