整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
色顯示百度首頁
今天早上醒來一看各大網站，為表示新冠肺炎疫情死難者的哀悼，各大網站均將頁面變為灰色顯示，顯示的極為莊重肅穆。本文主要介紹常用網頁頁面快速變灰色的方法。
對于網頁而言，頁面色彩、布局等主要受到層疊樣式文件CSS控制，網站頁面整體色彩的改變可以通過CSS進行整體的控制。在CSS中可以通過filter濾鏡屬性實現對網頁元素進行圖像、背景及素材的渲染。
Filter調整測試Demo
如上圖所示，通過設置Filter的屬性取值，實現對顏色色彩的控制。主要屬性說明如下：
1、filter: blur()方法
該方法主要用于實現對圖像設置高斯模塊，及屏幕上的像素融合程度即模糊程度。其參數需要以像素值形式進行提供。參數值越大模糊程度越高。示例如下圖：
網頁中顯示的圖標
在未使用filter屬性未設置時，顯示的原始圖片效果如上圖所示。我們可以進一步對頁面添加style樣式調整filter blur參數值，可實現頁面的模糊程度。如blur參數取值為2個像素，效果如下：
blur參數取值為2顯示效果
2、filter: grayscale()方法
該方法是用于實現頁面變灰的主要方法，主要用于設置頁面顯示的灰度。參數值需要以百分比形式進行提供，0%表示未進行灰度調整，100%表示將頁面完全轉化為灰度。我們還是以圖標為例，對其進行灰度設置進行說明。當灰度取值設置為20%時效果如下圖1所示，當灰度值設置為100%時效果如圖2所示：
圖一：灰度20%設置顯示效果
圖二：灰度100%設置圖片顯示效果
使用filter提供的 grayscale()方法對頁面進行灰度設置實現效果描述如上圖，我們可以快速實現將頁面快速變灰。目前瀏覽器的內核型號較多，對CSS的支持與解析情況不相同，在進行頁面灰度處理時需要考慮到用戶終端瀏覽器的類型，需要進行CSS樣式的兼容性設置。實現基本代碼描述如下：
-webkit-filter: grayscale(100%);
//(Apple Safari內核)
-moz-filter: grayscale(100%);
//(Firefox瀏覽器)
-ms-filter: grayscale(100%);
//(Internet Explorer（IE）瀏覽器)
-o-filter: grayscale(100%);
//(Opera瀏覽器)在明確網頁變灰所需使用濾鏡效果之后，我們可以使用其屬性進行頁面變灰效果。以下給出本人編寫的一個簡單Demo進行變灰測試，原始頁面效果如下：
測試原始頁面
按照編碼要求，我們在該頁面頭部<head>編寫樣式文件，實現變灰處理，所添加代碼描述如下：
變灰實現代碼
在頁面添加變灰代碼之后，我們可以看出明顯的變灰效果，效果描述如下：
頁面變灰實現效果
本文給出了網頁頁面變灰的實現簡單方法，作為網頁設計人員、前端開發人員應當能夠掌握基本使用方法，實現頁面的快速改變。
悼日打開各個網站，發現網頁都變成灰色了。今年國家經歷了非常慘痛的時刻，有很多烈士英雄保衛人民的安危遇難，昨天全國下降半旗，北京時間 10 點全國默哀三分鐘，來致敬英雄們。為了深切哀悼在抗擊新冠肺炎斗爭中的犧牲烈士和逝世同胞，4月4日0點起，全國多家網站和移動端，比如百度、優酷、愛奇藝、嗶哩嗶哩、抖音、快手、斗魚和CSDN等平臺給出公告稱：2020年4月4日全國性哀悼活動期間，停止今天一切公共娛樂活動。
隨便打開這些任何一個網站，全站的內容都變成了灰色，包括按鈕、圖片等等。相信這時候從事程序開發的粉絲可能會好奇這是怎么做到的呢？
其實解決方案很簡單，只需要幾行代碼就能搞定了。從事前端開發的朋友會以為所有的內容都統一換了一個 CSS 樣式，圖片也全換成灰色的了，按鈕等樣式也統一換成了灰色樣式。如下圖，有一個灰色樣式：[filter: grayscale(100%);]，也許就是這一個樣式控制著整個網頁顯示效果。
現在試著關掉這個樣式，會發現整個csdn頁面恢復了往常的紅色主題，包括網站logo、圖片和按鈕都恢復了。
總結上面的實驗效果，果然是這個樣式在起作用，而且是全局的效果，因為它是作用在了 html 這個節點之上的。只要修改這部分CSS代碼：
了紀念一些影響力很大的偉人逝世或者重要的紀念日的時候需要讓網頁全部變灰來表示我們對逝者的悼念。
其實這個功能很簡單，只需要在HTML 的head標簽里加入如下代碼即可。
<style type="text/css">
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);}
</style>
這里實現的是讓網頁整體變灰，無論網站的頭部、尾部或者側邊欄分離都可以實現效果。網上有很多方法，多數都是通過CSS的濾鏡來控制頁面的顯示而已，唯一不同的就CSS代碼調用的方式而已。
很早以前想著一個網站那么多的圖片、手動處理后替換是一個工作量異常繁復的事，然而事情當然沒有這么簡單，僅需幾行代碼即可輕松完成。
最后附上已故偉人的一首詞，沉痛哀悼深切緬懷...
《滿江紅·江上青百年誕辰祭》
自古英雄，憑蒼宇、江山點索。
酬壯志、鐵窗寒徹，泮池磅礴。
史嶺紅梅花瀝血，蘆溝曉月天飛鶴。
擎玉虹，魑魅冷相看，驚魂魄。
歌潁上，旗旆爍。驅稔寇，飆塵惡。
訴聲聲杜宇，孛星凋落。
春水綠楊風曼暖，秋山紅葉日彰灼。
清明日、持酒告先靈，神州躍。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
