網頁顏色一鍵變灰？分享 1 段優質 CSS 代碼片段！

內容首發于工粽號：程序員大澈，每日分享一段優質代碼片段，歡迎關注和投稿！

大家好，我是大澈！

本文約 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 -

源：進擊的Coder

今天是 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(16px16px20px 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 的更詳細的用法，希望有幫助。

References

[1] SVG filter element: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter

最后，跟大家分享今天看到的，對我觸動頗深的一段話：

“如果有后人來撰寫今天的歷史，那他們將發現沒有任何文字詞藻能夠寫盡這場災難的殘酷，也沒有任何語言修辭能描述人類為生存所付出的艱苦卓絕的努力。

我們將懷揣火種走過黑暗長夜，跨過戰友的遺骸，踏過荊棘和深淵，最終在累累尸骨上重新點燃種族延續的火炬。

我知道你們并不需要歷史來記載功勛，也無謂那些空虛華美的稱頌。

只要山川河流、千萬英靈，見證過我們前仆后繼的跋涉和永不放棄的努力。”

—— 敬平凡的人類

緬懷逝者，致敬英雄

愿疫情早日結束，再無傷痛！

色顯示百度首頁

今天早上醒來一看各大網站，為表示新冠肺炎疫情死難者的哀悼，各大網站均將頁面變為灰色顯示，顯示的極為莊重肅穆。本文主要介紹常用網頁頁面快速變灰色的方法。

CSS樣式Filter屬性

對于網頁而言，頁面色彩、布局等主要受到層疊樣式文件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>編寫樣式文件，實現變灰處理，所添加代碼描述如下：

變灰實現代碼

在頁面添加變灰代碼之后，我們可以看出明顯的變灰效果，效果描述如下：

頁面變灰實現效果

本文給出了網頁頁面變灰的實現簡單方法，作為網頁設計人員、前端開發人員應當能夠掌握基本使用方法，實現頁面的快速改變。

在線咨詢

上一篇：Web前端開發基礎知識，設置網頁背景圖，如何在網頁中插入圖片
下一篇：前端 - HTML基礎（2）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商