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

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樣式的兼容性設置。實現基本代碼描述如下：

<code>-webkit-filter: grayscale(100%); 
//(Apple Safari內核)
-moz-filter: grayscale(100%); 
//(Firefox瀏覽器)
-ms-filter: grayscale(100%); 
//(Internet Explorer（IE）瀏覽器)
-o-filter: grayscale(100%); 
//(Opera瀏覽器)/<code>

網頁變灰實例

在明確網頁變灰所需使用濾鏡效果之後，我們可以使用其屬性進行頁面變灰效果。以下給出本人編寫的一個簡單Demo進行變灰測試，原始頁面效果如下：

測試原始頁面

按照編碼要求，我們在該頁面頭部

變灰實現代碼

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

頁面變灰實現效果

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

閱讀更多 kid編程 的文章

關鍵字: opera瀏覽器 效果 網頁設計