大家好，我是二哥呀。

創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比湄潭網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式湄潭網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋湄潭地區(qū)。費(fèi)用合理售后完善，10年實(shí)體公司更值得信賴。

想必大家都感受到了，很多網(wǎng)站、APP 在昨天都變灰了。

先來感受一下變灰后的效果。

這種灰色的效果怎么實(shí)現(xiàn)的呢？如何做到圖片、文字、按鈕都變灰的效果呢？

方案 1，換一套灰色的 UI，那顯然成本太大了，用腳指頭想一想就知道不太可能。

方案 2，用魔法！

不好意思，還真被你猜中了！在網(wǎng)頁(yè)端按下 F12，打開開發(fā)者模式，用元素選擇器定位到 HTML 標(biāo)簽上，在「樣式」的面板中往下翻，就可以看到這樣一段代碼。

我把它復(fù)制過來大家看一下。

-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

打開二哥的網(wǎng)站《Java 程序員進(jìn)階之路》，定位到 HTML 標(biāo)簽，此時(shí)可以看到頁(yè)面是正常的顏色。

然后把之前的代碼添加到 HTML 上，然后就可以看到色系變成灰色了。

那這段代碼是什么意思呢？

直接把filter grayscale復(fù)制到搜索引擎里看一下。

當(dāng)參數(shù)為 0 的時(shí)候，顏色是正常的。

然后依次試一下 60%：

100%：

MDN 是怎么解釋grayscale()函數(shù)呢？

The grayscale() CSS function converts the input image to grayscale. Its result is a .

大致的意思就是，grayscale 是一個(gè) CSS 函數(shù)，可以把圖像轉(zhuǎn)成灰色，參數(shù)是個(gè)百分比，結(jié)果返回一個(gè) filter 函數(shù)。

The CSS data type represents a graphical effect that can change the appearance of an input image. It is used in the filter and backdrop-filter properties.

filter 函數(shù)可以用來改變圖像的顯示效果，用于 CSS 的 filter 屬性。 除了 grayscale 函數(shù)，可選項(xiàng)還有以下這些：

可以看到，目前的主流瀏覽器版本都支持 grayscale 函數(shù)，比如說 PC 端的 Chrome、edge、Firefox、Opera、Safari 等等，除了 IE。

---

沒有什么使我停留——除了目的，縱然岸旁有玫瑰、有綠蔭、有寧?kù)o的港灣，我是不系之舟。

本文已收錄到 GitHub 上星標(biāo) 4.2k+ 的開源專欄《Java 程序員進(jìn)階之路》，據(jù)說每一個(gè)優(yōu)秀的 Java 程序員都喜歡她，風(fēng)趣幽默、通俗易懂。內(nèi)容包括 Java 基礎(chǔ)、Java 并發(fā)編程、Java 虛擬機(jī)、Java 企業(yè)級(jí)開發(fā)（Git、Nginx、Maven、Intellij IDEA、Spring、Spring Boot、Redis、MySql 等等）、Java 面試等核心知識(shí)點(diǎn)。學(xué) Java，就認(rèn)準(zhǔn) Java 程序員進(jìn)階之路😄。

Github 倉(cāng)庫(kù)：https://github.com/itwanger/toBeBetterJavaer

GitCode 倉(cāng)庫(kù)也同步了一份：https://gitcode.net/three-musketeers/tobebetterjavaer

還用 GitCode Pages 生成了一個(gè)Java 程序員進(jìn)階之路網(wǎng)站，大家可以戳鏈接體驗(yàn)一下，沒想到 還有這樣的寶藏?。。。。。。?！

太強(qiáng)了！

star 了這個(gè)倉(cāng)庫(kù)就等于你擁有了成為了一名優(yōu)秀 Java 工程師的潛力。

你是否還在尋找穩(wěn)定的海外服務(wù)器提供商？創(chuàng)新互聯(lián)www.cdcxhl.cn海外機(jī)房具備T級(jí)流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確流量調(diào)度確保服務(wù)器高可用性，企業(yè)級(jí)服務(wù)器適合批量采購(gòu)，新人活動(dòng)首月15元起，快前往官網(wǎng)查看詳情吧

本文標(biāo)題：網(wǎng)站都變成灰色了，它是怎么實(shí)現(xiàn)的？-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明：http://weahome.cn/article/cocjgi.html