整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
：整個網頁變成灰色的代碼是什么？
答：使這個網頁的顏色變成灰色的最簡單的方法，就是在當前頁面的css里面。添加下面的代碼，并且讓他在任意的瀏覽器里面正確的執行，
html{
-webkit-filter:grayscale(100%);
-moz-filter:grayscale(100%);
-ms-filter:grayscale(100%);
-o-filter:grayscale(100%);
filter:grayscale(100%);
filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)
}上面的代碼就是最規范的代碼，把他加入到當前頁面的css里面即可，本站在2020年4月4日的清明節，就把上面的代碼添加到了css里面，全站開啟了頁面灰色，并且持續3天，來悼念抗擊新冠肺炎疫情斗爭犧牲烈士和逝世同胞。
天是 2020 年 4 月 4 日，星期六，清明節。
我們的國家經歷了非常慘痛的時刻，很多英雄在救助他人的路上倒下，更有很多烈士英雄保衛人民的安危遇難，今天全國下降半旗，北京時間 10 點全國默哀三分鐘，來致敬英雄們。同時今天一切公共娛樂活動也都會停止，包括直播、綜藝、影視、游戲等等。
我也在這里也向全國抗擊新冠肺炎疫情斗爭犧牲的烈士和逝世的同胞表達深切的哀悼，向所有在抗戰在疫情前線的工作和醫護人員致敬。我們每一個人的平安面前，都是英雄的人墻。
網站變灰
今天大家可以看到很多很多網站包括主頁和內容也都已經變成了灰色，比如百度、B 站、愛奇藝、CSDN 等等。
CSDN
愛奇藝
百度
大家可以看到全站的內容都變成灰色了，包括按鈕、圖片等等。這時候我們可能會好奇這是怎么做到的呢？
有人會以為所有的內容都統一換了一個 CSS 樣式，圖片也全換成灰色的了，按鈕等樣式也統一換成了灰色樣式。但你想想這個成本也太高了，而且萬一某個控件忘記加灰色樣式了豈不是太突兀了。
其實，解決方案很簡單，只需要幾行代碼就能搞定了。
實現
我們選擇一個網站，比如 B 站吧，打開瀏覽器開發者工具。
審查一下網頁的源代碼，我們可以發現在 html 的這個地方多了一個疑似的 class，叫做 gray，gray 中文即灰色。
變灰效果
其 CSS 內容為：
html.gray {
-webkit-filter: grayscale(.95);
}
我們將其取消，就能發現網站的顏色就能重新還原回來了。
還原效果
果然是這個樣式在起作用，而且是全局的效果，因為它是作用在了 html 這個節點之上的。
另外看看 CSDN，它也是用的這個 CSS 樣式，其內容為：
html {
-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);
}
這個實現看起來兼容性會更好一些。
因此我們可以確定，通過一個全局的 CSS 樣式就能將整個網站變成灰色效果。
分析
那么這里我們就來詳細了解一下這究竟是一個什么樣的 CSS 樣式。
這個樣式名叫做 filter，搜下 MDN 的官方介紹，其鏈接為：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter。
官方介紹內容如下：
filter CSS 屬性將模糊或顏色偏移等圖形效果應用于元素。濾鏡通常用于調整圖像，背景和邊框的渲染。
CSS 標準里包含了一些已實現預定義效果的函數。你也可以參考一個 SVG 濾鏡，通過一個 URL 鏈接到 SVG 濾鏡元素 (SVG filter element[1])。
其實就是一個濾鏡的意思。
官方有一個 Demo，可以看下效果，如圖所示。
Demo
比如這里通過 filter 樣式改變了圖片、顏色、模糊、對比度等等信息。
其所有用法示例如下：
/* URL to SVG filter */
filter: url("filters.svg#filter-id");
/* <filter-function> values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);
/* Multiple filters */
filter: contrast(175%) brightness(3%);
/* Global values */
filter: inherit;
filter: initial;
filter: unset;
各個用法介紹大家可以參考官方的文檔說明：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
比如這里如果我們可以使用 blur 設置高斯模糊，用法如下：
filter: blur(radius)
給圖像設置高斯模糊。radius 一值設定高斯函數的標準差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；如果沒有設定值，則默認是 0；這個參數可設置絕對像素值，但不接受百分比值。
可以達成這樣的效果：
效果
再說回剛才的灰色圖像，這里其實就是設置了 grayscale，其用法如下：
filter: grayscale(percent)
將圖像轉換為灰度圖像。值定義轉換的比例。percent 值為 100% 則完全轉為灰度圖像，值為 0% 圖像無變化。值在 0% 到 100% 之間，則是效果的線性乘子。若未設置，值默認是 0。另外除了傳遞百分比，還可以傳遞浮點數，效果是一樣的。
如：
filter: grayscale(1)
filter: grayscale(100%)
都可以將節點轉化為 100% 的灰度模式。
所以一切到這里就清楚了，如果我們想要把全站變成灰色，再考慮到各瀏覽器兼容寫法，可以參考下 CSDN 的寫法：
.gray {
-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);
}
這樣想要變灰的節點只需要加上 gray 這個 class 就好了，比如加到 html 節點上就可以全站變灰了。
最后呢，看一下瀏覽器對 filter 這個樣式的兼容性怎樣，如圖所示：
兼容性
這里我們看到，這里除了 IE，其他的 PC、手機端的瀏覽器都支持了，Firefox 的 PC、安卓端還單獨對 SVG 圖像加了支持，可以放心使用。
總結
本篇文章簡單介紹了一下今天觀察到的網站變灰的實現，也學習了 filter 的更詳細的用法，希望有幫助。
內容首發于工粽號：程序員大澈，每日分享一段優質代碼片段，歡迎關注和投稿！
大家好，我是大澈！
本文約 1100+ 字，整篇閱讀約需 2 分鐘。
今天分享一段優質 CSS 代碼片段，應用灰度效果，讓頁面變成黑白顯示。
老規矩，先閱讀代碼片段并思考，再看代碼解析再思考，最后評論區留下你的見解！
body {
filter: grayscale(1); // 1相當于100%
}分享原因
這段代碼展示了如何使用 CSS 濾鏡來將整個網頁變為灰度效果。
在特殊的日子里，網頁有整體變灰色的需求，可以使用這段代碼，這個需求很有必要。
再就是做一些老照片或黑白電影的效果，也可以使用這段代碼。
代碼解析
1. 選擇器 body
這一部分選擇了 HTML 文檔的 <body> 元素，即整個網頁的主體。
CSS 的 filter 屬性通常用于圖像，但也可以應用到其他任何 HTML 元素上。
2. grayscale(1);
grayscale 濾鏡將元素的顏色變成灰度效果。
參數 1 表示 100% 灰度，參數 0 表示無灰度效果。
3. filter 所有屬性值 大盤點！
CSS 的 filter 屬性提供了多種圖形效果，且這些屬性值可以組合用起來，且可以應用于任何元素。
以下是 filter 屬性的所有值及其詳細解釋：
blur()
功能：應用模糊效果。
參數：接受一個長度值（如 px、em），默認值是 0。
示例：filter: blur(5px);
brightness()
功能：調整圖像的亮度。
參數：接受一個數值，1 為原始亮度。值小于 1 會降低亮度，值大于 1 會增加亮度。
示例：filter: brightness(0.5);
contrast()
功能：調整圖像的對比度。
參數：接受一個數值，1 為原始對比度。值小于 1 會降低對比度，值大于 1 會增加對比度。
示例：filter: contrast(200%);
drop-shadow()
功能：應用陰影效果。
參數：類似于 box-shadow，包括偏移量、模糊半徑和顏色。
示例：filter: drop-shadow(10px 10px 10px #000);
grayscale()
功能：將圖像變為灰度。
參數：接受一個 0 到 1 之間的數值，0 為無灰度，1 為完全灰度。
示例：filter: grayscale(1);
hue-rotate()
功能：旋轉圖像的色相。
參數：接受一個角度值，單位為度（deg）。
示例：filter: hue-rotate(90deg);
invert()
功能：反轉圖像的顏色。
參數：接受一個 0 到 1 之間的數值，0 為無效果，1 為完全反轉。
示例：filter: invert(1);
opacity()
功能：調整圖像的透明度。
參數：接受一個 0 到 1 之間的數值，0 為完全透明，1 為完全不透明。
示例：filter: opacity(0.5);
saturate()
功能：調整圖像的飽和度。
參數：接受一個數值，1 為原始飽和度。值小于 1 會降低飽和度，值大于 1 會增加飽和度。
示例：filter: saturate(2);
sepia()
功能：將圖像變為棕褐色。
參數：接受一個 0 到 1 之間的數值，0 為無效果，1 為完全棕褐色。
示例：filter: sepia(1);
url()
功能：引用 SVG 濾鏡。
參數：接受一個 URL，指向一個包含 SVG 濾鏡的文件。
示例：filter: url(#filter-id);
- end -
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
