如何用一行代碼實(shí)現(xiàn)網(wǎng)頁(yè)變灰效果？

天是 2020 年 4 月 4 日，星期六，清明節(jié)。

我們的國(guó)家經(jīng)歷了非常慘痛的時(shí)刻，很多英雄在救助他人的路上倒下，更有很多烈士英雄保衛(wèi)人民的安危遇難，今天全國(guó)下降半旗，北京時(shí)間 10 點(diǎn)全國(guó)默哀三分鐘，來(lái)致敬英雄們。同時(shí)今天一切公共娛樂(lè)活動(dòng)也都會(huì)停止，包括直播、綜藝、影視、游戲等等。

我在這里也向全國(guó)抗擊新冠肺炎疫情斗爭(zhēng)犧牲的烈士和逝世的同胞表達(dá)深切的哀悼，向所有抗戰(zhàn)在疫情前線的工作和醫(yī)護(hù)人員致敬。我們每一個(gè)人的平安面前，都是英雄的人墻。

網(wǎng)站變灰

今天大家可以看到很多很多網(wǎng)站包括主頁(yè)和內(nèi)容也都已經(jīng)變成了灰色，比如百度、B 站、愛奇藝、CSDN 等等。

CSDN

愛奇藝

百度

大家可以看到全站的內(nèi)容都變成灰色了，包括按鈕、圖片等等。這時(shí)候我們可能會(huì)好奇這是怎么做到的呢？

有人會(huì)以為所有的內(nèi)容都統(tǒng)一換了一個(gè) CSS 樣式，圖片也全換成灰色的了，按鈕等樣式也統(tǒng)一換成了灰色樣式。但你想想這個(gè)成本也太高了，而且萬(wàn)一某個(gè)控件忘記加灰色樣式了豈不是太突兀了。

其實(shí)，解決方案很簡(jiǎn)單，只需要幾行代碼就能搞定了。

實(shí)現(xiàn)

我們選擇一個(gè)網(wǎng)站，比如 B 站吧，打開瀏覽器開發(fā)者工具。

審查一下網(wǎng)頁(yè)的源代碼，我們可以發(fā)現(xiàn)在 html 的這個(gè)地方多了一個(gè)疑似的 class，叫做 gray，gray 中文即灰色。

變灰效果

其 CSS 內(nèi)容為：

html.gray {    
  -webkit-filter: grayscale(.95);
}

我們將其取消，就能發(fā)現(xiàn)網(wǎng)站的顏色就能重新還原回來(lái)了。

還原效果

果然是這個(gè)樣式在起作用，而且是全局的效果，因?yàn)樗亲饔迷诹?html 這個(gè)節(jié)點(diǎn)之上的。

另外看看 CSDN，它也是用的這個(gè) CSS 樣式，其內(nèi)容為：

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);
}

這個(gè)實(shí)現(xiàn)看起來(lái)兼容性會(huì)更好一些。

因此我們可以確定，通過(guò)一個(gè)全局的 CSS 樣式就能將整個(gè)網(wǎng)站變成灰色效果。

分析

那么這里我們就來(lái)詳細(xì)了解一下這究竟是一個(gè)什么樣的 CSS 樣式。

這個(gè)樣式名叫做 filter，搜下 MDN 的官方介紹，其鏈接為：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter。

官方介紹內(nèi)容如下：

filter CSS 屬性將模糊或顏色偏移等圖形效果應(yīng)用于元素。濾鏡通常用于調(diào)整圖像，背景和邊框的渲染。
CSS 標(biāo)準(zhǔn)里包含了一些已實(shí)現(xiàn)預(yù)定義效果的函數(shù)。你也可以參考一個(gè) SVG 濾鏡，通過(guò)一個(gè) URL 鏈接到 SVG 濾鏡元素 (SVG filter element[1])。

其實(shí)就是一個(gè)濾鏡的意思。

官方有一個(gè) Demo，可以看下效果，如圖所示。

Demo

比如這里通過(guò) filter 樣式改變了圖片、顏色、模糊、對(duì)比度等等信息。

其所有用法示例如下：

/* 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;

各個(gè)用法介紹大家可以參考官方的文檔說(shuō)明：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

比如這里如果我們可以使用 blur 設(shè)置高斯模糊，用法如下：

filter: blur(radius)

給圖像設(shè)置高斯模糊。radius 一值設(shè)定高斯函數(shù)的標(biāo)準(zhǔn)差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；如果沒(méi)有設(shè)定值，則默認(rèn)是 0；這個(gè)參數(shù)可設(shè)置絕對(duì)像素值，但不接受百分比值。

可以達(dá)成這樣的效果：

效果

再說(shuō)回剛才的灰色圖像，這里其實(shí)就是設(shè)置了 grayscale，其用法如下：

filter: grayscale(percent)

將圖像轉(zhuǎn)換為灰度圖像。值定義轉(zhuǎn)換的比例。percent 值為 100% 則完全轉(zhuǎn)為灰度圖像，值為 0% 圖像無(wú)變化。值在 0% 到 100% 之間，則是效果的線性乘子。若未設(shè)置，值默認(rèn)是 0。另外除了傳遞百分比，還可以傳遞浮點(diǎn)數(shù)，效果是一樣的。

如：

filter: grayscale(1)filter: grayscale(100%)

都可以將節(jié)點(diǎn)轉(zhuǎn)化為 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);
}

這樣想要變灰的節(jié)點(diǎn)只需要加上 gray 這個(gè) class 就好了，比如加到 html 節(jié)點(diǎn)上就可以全站變灰了。

最后呢，看一下瀏覽器對(duì) filter 這個(gè)樣式的兼容性怎樣，如圖所示：

兼容性

這里我們看到，這里除了 IE，其他的 PC、手機(jī)端的瀏覽器都支持了，F(xiàn)irefox 的 PC、安卓端還單獨(dú)對(duì) SVG 圖像加了支持，可以放心使用。

總結(jié)

本篇文章簡(jiǎn)單介紹了一下今天觀察到的網(wǎng)站變灰的實(shí)現(xiàn)，也學(xué)習(xí)了 filter 的更詳細(xì)的用法，希望有幫助。

References

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

計(jì)最近大家也都看到了，在瀏覽互聯(lián)網(wǎng)時(shí)，很多網(wǎng)站首頁(yè)都變成了灰色。比如百度首頁(yè)、淘寶、京東、嗶哩嗶哩等我們常瀏覽的網(wǎng)站。一般在紀(jì)念對(duì)社會(huì)有重大貢獻(xiàn)的任務(wù)或者大事件時(shí)，為了表達(dá)我們的尊重以及沉痛心情，將網(wǎng)站變成灰色進(jìn)行紀(jì)念。

那么，作為一個(gè)it從業(yè)的技術(shù)人員來(lái)說(shuō)，將平時(shí)色彩鮮明的網(wǎng)站置成灰色是如何實(shí)現(xiàn)的呢？是如何可以做到文字、圖片、按鈕所有的元素都是灰色的效果呢？

方案1：提前設(shè)計(jì)一套網(wǎng)站的灰色css樣式，在需要的時(shí)候進(jìn)行替換。顯然這樣做的成本太大，而且有些網(wǎng)站還有一些flash的動(dòng)畫效果，難道也要做一個(gè)黑白版本？甚至有些CG特效動(dòng)畫更是燒錢。

方案2：幾行代碼輕松搞定。

其實(shí)這個(gè)效果的實(shí)現(xiàn)并沒(méi)有我們想象的那么復(fù)雜。在網(wǎng)頁(yè)端按下F12，打開開發(fā)者模式，定位到html標(biāo)簽上，我們可以看到這樣一段代碼樣式：

{
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

如果我們將這個(gè)樣式取消，或者是將樣式中的100%設(shè)置為0，又會(huì)恢復(fù)成網(wǎng)站本來(lái)的顏色配置。

那么這段代碼是什么意思呢？主要看 filter grayscale(https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter)是個(gè)什么東東。

grayscale 是一個(gè) CSS 函數(shù)，可以把圖像轉(zhuǎn)成灰色，參數(shù)是個(gè)百分比，結(jié)果返回一個(gè) filter 函數(shù)。目前的主流瀏覽器版本都支持 grayscale 函數(shù)，比如說(shuō) PC 端的 Chrome、edge、Firefox、Opera、Safari 等等，除了 IE。

每一個(gè)特定或者特殊的日子里，幾乎所有的網(wǎng)站都變成了灰色，那么這種效果是怎么實(shí)現(xiàn)的呢？

今天就來(lái)簡(jiǎn)單的實(shí)現(xiàn)一下這樣的效果。

添加以下全局CSS樣式，可以實(shí)現(xiàn)此效果：

代碼一：

html {
  -webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);
} 
<!-- 可以是整個(gè)網(wǎng)站變成灰色的  -->

實(shí)現(xiàn)網(wǎng)頁(yè)顏色變灰這個(gè)效果，非常簡(jiǎn)單：

filter: grayscale(100%);

這樣一段代碼即可實(shí)現(xiàn)，放在html和body的css屬性里即可實(shí)現(xiàn)。

意思是修改所有的顏色為黑白 (100% 灰度):

灰色網(wǎng)站會(huì)加入這段代碼，你可以按F12，把這段源碼刪除，即可變成彩色

代碼二：

html { 
   filter:progidXImageTransform.Microsoft.BasicImage(grayscale=1); 
}

使用方法：這段代碼可以變網(wǎng)頁(yè)為黑白，將代碼加到CSS最頂端就可以實(shí)現(xiàn)素裝。建議全國(guó)站長(zhǎng)動(dòng)起來(lái)。為在地震中遇難的同胞哀悼。

如果網(wǎng)站沒(méi)有使用CSS，可以在網(wǎng)頁(yè)/模板的HTML代碼<head>和</head> 之間插入：

<style>
   html{
     filter:progidXImageTransform.Microsoft.BasicImage(grayscale=1);
  }
</style>

有一些站長(zhǎng)的網(wǎng)站可能使用這個(gè)css 不能生效，是因?yàn)榫W(wǎng)站沒(méi)有使用最新的網(wǎng)頁(yè)標(biāo)準(zhǔn)協(xié)議：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

請(qǐng)將網(wǎng)頁(yè)最頭部的<html>替換為以上代碼。

有一些網(wǎng)站FLASH動(dòng)畫的顏色不能被CSS濾鏡控制，可以在FLASH代碼的<object …>和</object>之間插入：

<param value="false" name="menu"/>
<param value="opaque" name="wmode"/>

最簡(jiǎn)單的把頁(yè)面變成灰色的代碼是在head 之間加

<style type="text/css"> 
html {
   FILTER: gray
}
</style>

代碼三：

html{ 
filter: grayscale(100%); 
-webkit-filter: grayscale(100%); 
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%); 
-o-filter: grayscale(100%); 
filter: url("data:image/svg+xml;utf8,#grayscale"); 
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
-webkit-filter: grayscale(1);
}

總結(jié)：

以上幾種代碼（方法），都是通過(guò)CSS的濾鏡來(lái)控制頁(yè)面的顯示而已，唯一不同的就CSS代碼及調(diào)用的方式。在css的修飾時(shí)還有權(quán)重問(wèn)題，所以有時(shí)候css代碼不生效的時(shí)候可以考慮一下代碼的權(quán)重問(wèn)題。

歡迎關(guān)注第一山，今后將有更多前端開發(fā)技術(shù)與大家共同交流學(xué)習(xí)。

在線咨詢

上一篇：網(wǎng)站開啟灰色色調(diào)，4月4日全國(guó)哀悼！
下一篇：《小白HTML5成長(zhǎng)之路30》怎樣讓任意塊元素基于父容器居中

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商