APP及網(wǎng)站快速變黑白灰色的方法

多人在打開(kāi)支付寶、淘寶、美團(tuán)、、小紅書(shū)等軟件APP的時(shí)候，都會(huì)發(fā)現(xiàn)首頁(yè)變成了黑白色吧

朋友圈里都是大家的紀(jì)念、歌頌、緬懷；像父母那代人更是感情真誠(chéng)熱烈，對(duì)于他們來(lái)說(shuō)，江老的離開(kāi)也像是一個(gè)時(shí)代的結(jié)束......

騰訊主頁(yè)如何做的？

相信今天大家都發(fā)現(xiàn)了，大部分網(wǎng)站的頁(yè)面都已經(jīng)變成了黑白色來(lái)悼念逝去的人們，那么站在前端開(kāi)發(fā)者的角度，這個(gè)效果是怎么做出來(lái)的呢？頁(yè)面中有那么多的文字和圖片，難道要一個(gè)個(gè)改顏色嗎？讓我們一起來(lái)看看國(guó)內(nèi)領(lǐng)先的騰訊公司是怎么做的。

首先我們打開(kāi)騰訊網(wǎng)的首頁(yè)，按F12進(jìn)入瀏覽器控制臺(tái)，強(qiáng)哥猜測(cè)應(yīng)該是改的整體的樣式，估計(jì)是在body標(biāo)簽上直接加的樣式。

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

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

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

當(dāng)然了，filter這個(gè)屬性的功能可遠(yuǎn)遠(yuǎn)不止這一點(diǎn)，除了grayscale，我們還可以把filter設(shè)置成blur(px),這是給頭像設(shè)置高斯模糊，設(shè)置的px越大就會(huì)越模糊，我們來(lái)看看設(shè)置成3px時(shí)的效果：

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

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

最后讓我們?cè)僖淮沃戮茨切槿祟?lèi)獻(xiàn)身的英雄們，愿逝者安息，愿生者奮發(fā)，愿祖國(guó)昌盛！

第一種：修改 CSS 文件

我們可以在網(wǎng)頁(yè)的 CSS 文件中添加以下的 CSS 代碼，來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)黑白色，也就是網(wǎng)站變灰

CSS 代碼

html {


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


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

第二種：在網(wǎng)頁(yè)的標(biāo)簽內(nèi)加入以下代碼

如果你不想改動(dòng) CSS 文件，你可以通過(guò)在網(wǎng)頁(yè)頭部中的標(biāo)簽內(nèi)部加入內(nèi)聯(lián) CSS 代碼的形式實(shí)現(xiàn)網(wǎng)站網(wǎng)頁(yè)變灰

代碼

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

有一些站長(zhǎng)的網(wǎng)站可能使用這個(gè) css 不能生效，是因?yàn)榫W(wǎng)站沒(méi)有使用最新的網(wǎng)頁(yè)標(biāo)準(zhǔn)協(xié)議

請(qǐng)將網(wǎng)頁(yè)最頭部的替換為以上代碼。

第三種：修改標(biāo)簽加入內(nèi)聯(lián)樣式

如里上面的兩種方式都不喜歡，可以通過(guò)修改標(biāo)簽，以加入內(nèi)聯(lián)樣式的方法，達(dá)到網(wǎng)頁(yè)變灰的效果

代碼

<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：以上幾種方法，都是通過(guò) CSS 的濾鏡來(lái)控制頁(yè)面的顯示而已，唯一不同的就 CSS 代碼調(diào)用的方式。各位，喜歡哪種就自己挖去吧！

附：實(shí)現(xiàn)后的效果如下圖所示

- END -

先打開(kāi)快捷指令

1，新建快捷指令

2，添加操作“打開(kāi)app”

3，選擇你要換圖標(biāo)的APP

4，點(diǎn)擊右上角設(shè)置按鈕

5，添加到主屏幕上，

6，點(diǎn)擊輸入欄中的框框即可更換圖標(biāo)，隨后添加桌面即可。

但是呢用快捷指令建設(shè)的桌面圖標(biāo)，打開(kāi)會(huì)有彈窗通知。我們可以用下列方法解決。

1，打開(kāi)快捷指令自動(dòng)化，創(chuàng)建個(gè)人自動(dòng)化。

2，選擇打開(kāi)APP

3，選取替換APP圖標(biāo)的APP。ps：這里可以選擇多個(gè)APP

4，點(diǎn)擊添加操作，

5，選取“位置”，“過(guò)濾位置”

6，點(diǎn)擊下一步

7，關(guān)閉運(yùn)行前詢(xún)問(wèn)

8，單擊完成即可。

免得待會(huì)兒快捷指令亂七八糟，建議先創(chuàng)建個(gè)快捷指令文件夾。

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

一個(gè)好的編輯器我們可以方便的開(kāi)發(fā)項(xiàng)目，編寫(xiě)代碼，配置和管理我們的項(xiàng)目。所以我們開(kāi)始編寫(xiě)html代碼之前需要搭建開(kāi)發(fā)環(huán)境。

基于html項(xiàng)目的開(kāi)發(fā)和代碼編寫(xiě)現(xiàn)在網(wǎng)上有很多編輯器，也有免費(fèi)的，也有收費(fèi)的編輯器。基于在Windows系統(tǒng)環(huán)境下開(kāi)發(fā)和編寫(xiě)html代碼最簡(jiǎn)單的編輯器就是Windows自帶的記事本，我們可以使用記事本編輯html代碼。

使用記事本編寫(xiě)html的步驟是首先新建一個(gè)文本文檔，按照html的語(yǔ)法規(guī)則編寫(xiě)相關(guān)的代碼和保存文件，然后把文件的后綴名改為.html，使用電腦上的瀏覽器打開(kāi)就可以查看我們代碼的運(yùn)行結(jié)果。

雖然記事本也能編寫(xiě)html代碼，但是效率不高也不方便，所以我們使用專(zhuān)業(yè)的編輯器來(lái)開(kāi)發(fā)項(xiàng)目，編寫(xiě)代碼和管理項(xiàng)目。

常用html代碼編寫(xiě)的免費(fèi)軟件有HBuilderX，vs code，Sublime Text 等等。

HBuilderX官網(wǎng)下載地址：

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

vs code的官網(wǎng)下載地址：

https://code.visualstudio.com/

Sublime Text官網(wǎng)下載地址：

http://www.sublimetext.com/

我們以后的教程都使用HBuilderX，所以下面為了同學(xué)們的學(xué)習(xí)方便，對(duì)HBuilderX的下載和安裝做詳細(xì)的教程。

一，下載

首先訪(fǎng)問(wèn)HBuilderX的官網(wǎng)網(wǎng)址：

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

打開(kāi)上面的HBuilderX下載網(wǎng)址后點(diǎn)擊頁(yè)面上download，在彈出的對(duì)話(huà)框里選擇適合自己電腦的HBuilderX版本下載。

在Windows10環(huán)境下下載后的文件是一個(gè)壓縮的.zip文件。

二，安裝

鼠標(biāo)右擊下載下來(lái)的壓縮文件進(jìn)行解壓。

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

解壓完成后鼠標(biāo)雙擊HBuilderX文件夾：

雙擊運(yùn)行名為HBuilderX.exe的應(yīng)用程序文件即可啟動(dòng)HBuilderX編輯器：

因?yàn)镠BuilderX是一個(gè)綠色軟件所以沒(méi)有桌面快捷方式和開(kāi)始菜單快速啟動(dòng)程序，我們可以右擊HBuilderX.exe文件創(chuàng)建桌面快捷方式。

小百科：

綠色軟件指一類(lèi)小型軟件，多數(shù)為免費(fèi)軟件，最大特點(diǎn)是軟件無(wú)需安裝便可使用，可存放于閃存中，移除后也不會(huì)將任何記錄留在本機(jī)計(jì)算機(jī)上。通俗點(diǎn)講綠色軟件就是指不用安裝，下載直接可以使用的軟件。綠色軟件不會(huì)在注冊(cè)表中留下注冊(cè)表鍵值，所以相對(duì)一般的軟件來(lái)說(shuō)，綠色軟件對(duì)系統(tǒng)的影響幾乎沒(méi)有，所以是很好的一種軟件類(lèi)型。

三，新建項(xiàng)目

HBuilderX編輯器初次啟動(dòng)時(shí)的默認(rèn)界面是下圖所示：

按照下圖所示可以創(chuàng)建一個(gè)新的名為demo1空白項(xiàng)目：

名為demo1的空白項(xiàng)目創(chuàng)建成功后的界面如下圖所示：

接下來(lái)在剛我們新建的demo1項(xiàng)目下創(chuàng)建名為helloworld的html文件

鼠標(biāo)右擊創(chuàng)建的demo1項(xiàng)目選擇新建在選擇.html文件：

在彈出的對(duì)話(huà)框里填入html文件的名稱(chēng)：

編寫(xiě)一段代碼：

運(yùn)行：

在瀏覽器上觀察效果：

好了，到這里html的開(kāi)發(fā)環(huán)境搭建和HBuilderX的安裝教程結(jié)束了。

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

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

雅黑主題：

雅藍(lán)主題：

好了本節(jié)全部?jī)?nèi)容全部結(jié)束了，希望我準(zhǔn)備的內(nèi)容對(duì)你有所幫助

你的支持是我的最大動(dòng)力，若覺(jué)得我的教程還可以對(duì)你有幫助為我點(diǎn)贊加關(guān)注！謝謝！

在線(xiàn)咨詢(xún)

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

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

APP及網(wǎng)站快速變黑白灰色的方法

您的項(xiàng)目需求