整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
家肯定注意到，很多網站變成灰色，原因都知道，是為了紀念一位偉人。
比如我們打開百度，界面如下：
這種把整個頁面都變成灰色，是怎么做到的呢？
對前端開發有經驗的同學，也許會說換一套灰色的模板UI。
顯然是不可能的，網站上元素這么多，而且一直在迭代新功能，都改成灰色成本太大了，所以一定有另一種非常快速的方法。
在瀏覽器按下F12，我找到了答案。
body上多了一個名為big-event-gray的樣式。
名字很好理解，大事件灰色，所以就是它了。
于是找了下這個樣式的定義，代碼如下（為方便閱讀，我格式化了一下）：
關鍵是這個grayscale函數，這是一個css函數，可以直接把圖片轉成灰色。
網頁實現灰色相對簡單，但是APP就比較復雜了。
隨便打開幾個APP，會發現一般只有首頁是灰色的，打開新的頁面還是原來的配色。
原因是APP每個頁面的樣式都是獨立的，除非開發功能的時候就統一讀取公共的參數設置顏色，但是剛才也說了，那成本太高了。
點個“在看”，緬懷偉人，永垂不朽。
色顯示百度首頁
今天早上醒來一看各大網站，為表示新冠肺炎疫情死難者的哀悼，各大網站均將頁面變為灰色顯示，顯示的極為莊重肅穆。本文主要介紹常用網頁頁面快速變灰色的方法。
對于網頁而言，頁面色彩、布局等主要受到層疊樣式文件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>編寫樣式文件，實現變灰處理，所添加代碼描述如下：
變灰實現代碼
在頁面添加變灰代碼之后，我們可以看出明顯的變灰效果，效果描述如下：
頁面變灰實現效果
本文給出了網頁頁面變灰的實現簡單方法，作為網頁設計人員、前端開發人員應當能夠掌握基本使用方法，實現頁面的快速改變。
家看到網站的內容都變成了灰色，包括按鈕、圖片等等。這時候我們可能會好奇這是怎么做到的呢？
有人會以為所有的內容都統一換了一個 CSS 樣式，圖片也全換成灰色的了，按鈕等樣式也統一換成了灰色樣式。但你想想這個成本也太高了，而且萬一某個控件忘記加灰色樣式了豈不是變成生產事故要扣獎金了。
百度：
百度
京東：
京東
：
慕課網：
慕課網
給大家總結出一段規范的代碼，把這段代碼加入網站頁面的CSS里面即可實現頁面變成灰色的效果：
規范代碼
filter是濾鏡的意思，filter:gray的意思就是說給頁面加上一個灰度的濾鏡，所以html里面的所有內容都會變成黑白的了。不過這個濾鏡對于chrome和safari瀏覽器是無效的，所以下面會有一行-webkit-filter: grayscale(100%);
一、blur(px)高斯模糊
給圖像高斯模糊。如果沒有設定值，則默認值是0；這個參數可設置css長度值，不接受百分比值
img {
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
filter: blur(5px);
}二、brightness(%)亮度
使圖像看起來更亮或更暗。值是100%，圖像無變化，超過100%，變亮，小于100%，變暗。
filter: brightness(150%)三、contrast(%)對比度
filter: contrast(200%)四、drop-shadow(x y blur speed color) 陰影效果
filter-shadow: (50px 50px 5px tomato)與box-shadow效果上有顯著的區別
五、grayscale(%)灰度
filter: grayscale(100%)六、hue-rotate()色相旋轉
filter: hue-rotate(100%)七、invate(%)
反轉輸入圖像。值為100%是完全反轉。 值為0%則圖像無變化。0%~100%之間，則是效果的線性乘子。
filter: invate(100%)八、opacity(%)
轉化圖像的透明度。值為0%則是完全透明。值為100%則圖像無變化
filter: opacity(100%)九、saturate(%)
轉換圖像的飽和度。值為0%則是完全不飽和，值為100%則圖像無變化。值允許大于100%，會有更高的飽和度。
filter: saturate(100%)十、sepia(%)
將圖像轉為深褐色。值為100%則完全是深褐色
img {
-webkit-filter: sepia(100%); /* Chrome, Safari, Opera */
filter: sepia(100%);
}十一、復合函數
使用多個濾鏡，每個濾鏡使用空格分割。
注意：順序是非常重要的（例如使用grayscale()再使用sepia()將產生一個完整的灰度圖片）
img {
-webkit-filter: contrast(200%) brightness(150%); /* Chrome, Safari, Opera */
filter: contrast(200%) brightness(150%);
}*請認真填寫需求信息，我們會在24小時內與您取得聯系。
