網(wǎng)站實(shí)現(xiàn)哀悼變灰效果，一行css樣式代碼搞定

發(fā)生重大哀悼事件時候，需要緊急將網(wǎng)站變灰以示哀悼，在此蟲蟲給大家總結(jié)了幾種方法，通過簡單修改一下站點(diǎn)樣式即可實(shí)現(xiàn)。

修改源碼

另外主要方便快捷的方法是使用CSS樣式的grayscale()方法。

grayscale() : 對圖片進(jìn)行灰度轉(zhuǎn)換，grayscale是 <filter-function> 的子屬性，當(dāng)100%參數(shù)時候的效果如下：

最簡單地把頁面的<html>開始標(biāo)簽中間之間加：

style="-webkit-filter: grayscale(100%);"

或者修改站點(diǎn)CSS樣式

html {-webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);}

將上述代碼添加加到CSS最頂端就可以實(shí)現(xiàn)。

為了兼容多種瀏覽器標(biāo)準(zhǔn)，可以增加一下樣式：

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

如果網(wǎng)站后臺無法定義CSS樣式，這需要在站點(diǎn)模板頁的head標(biāo)簽中間插入style標(biāo)志位：

<style>
html{-webkit-filter: grayscale(100%);}
</style>

對于一些老的網(wǎng)站，為了支持該函數(shù)需要修改html標(biāo)頭，將其修改為最新標(biāo)準(zhǔn)標(biāo)頭才可以：對一些使用Flash（不在建議使用）的老站點(diǎn)，起顏色可能也不支持CSS濾鏡變灰，則需要在可以在FLASH代碼的<object …>和之間插入：

Nginx代理

對于一下沒有辦法修改源站代碼的情況下，也可以在Nginx站點(diǎn)代理無服務(wù)器上，通過sub_filter指令來實(shí)現(xiàn)。

受限確保nginx支持http_sub_module模塊，如果不支持需要重新編譯安裝Nginx，自愛安裝時候添加build參數(shù)—with-http_sub_module

然后在Nginx的http模塊增加如下代碼：

sub_filter '</head>' '<style type="text/css">html{ -webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}</style>';sub_filter_once on;

然后nginx -t測試配置正常無誤

nginx -s reload 重啟nginx即可

.4日清明節(jié)大家可以看到很多很多網(wǎng)站包括主頁和內(nèi)容也都已經(jīng)變成了灰色，比如百度、掘金、思否、CSDN 等等。

思否

CSDN

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

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

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

實(shí)現(xiàn)

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

變灰效果

審查一下網(wǎng)頁的源代碼，選中html，然后我們只要將下面這行 CSS 樣式，加入到頁面指定節(jié)點(diǎn)，即可實(shí)現(xiàn)網(wǎng)頁變灰的效果：

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

}

-webkit-filter: grayscale(.95);我們將其取消，就能發(fā)現(xiàn)網(wǎng)站的顏色就能重新還原回來了。還原效果

還原效果

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

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

分析

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

這個樣式名叫做 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ù)。你也可以參考一個 SVG 濾鏡，通過一個 URL 鏈接到 SVG 濾鏡元素 (SVG filter element[1])。

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

官方有一個 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 設(shè)置高斯模糊，用法如下：

filter: grayscale(percent)

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

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

效果

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

filter: grayscale(percent)

filter: grayscale(percent)

將圖像轉(zhuǎn)換為灰度圖像。值定義轉(zhuǎn)換的比例。percent 值為 100% 則完全轉(zhuǎn)為灰度圖像，值為 0% 圖像無變化。值在 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 這個 class 就好了，比如加到 html 節(jié)點(diǎn)上就可以全站變灰了。

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

兼容性

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

niapp項(xiàng)目里面要做按鈕，下載了幾個按鈕圖標(biāo)之后，想弄成灰色禁用效果，作為手越高、人越懶信念的堅(jiān)定支持者，懶得再去下載灰色圖標(biāo)了，直接CSS搜起，發(fā)現(xiàn)了方便的辦法。

實(shí)例

隨便找點(diǎn)兒圖片：

使用此句可以全部變灰。

filter: grayscale(1)

如果是grayscal(0.5)?

只有一點(diǎn)兒顏色，半灰是也，如同加了個濾鏡。

filter：n. 過濾器；濾光器，濾聲器，濾波器；過濾程序，過濾軟件；（指示車輛轉(zhuǎn)彎的）分流指示燈 v. 過濾；滲入，透過；（消息、信息等）慢慢傳開，走漏；緩慢進(jìn)入，陸續(xù)步入；（車輛）看到分流指示燈的信號后轉(zhuǎn)彎；（程序）篩選。

uniapp項(xiàng)目中的運(yùn)用

放在自己項(xiàng)目里面，直接使用動態(tài)class搞定。

在線咨詢

上一篇：20個超炫的html5視頻背景頁面
下一篇：如何制作一個完美的全屏視頻H5

您的項(xiàng)目需求

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

整合營銷服務(wù)商