整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
內(nèi)容首發(fā)于工粽號(hào)：程序員大澈，每日分享一段優(yōu)質(zhì)代碼片段，歡迎關(guān)注和投稿！
大家好，我是大澈！
本文約 1100+ 字，整篇閱讀約需 2 分鐘。
今天分享一段優(yōu)質(zhì) CSS 代碼片段，應(yīng)用灰度效果，讓頁(yè)面變成黑白顯示。
老規(guī)矩，先閱讀代碼片段并思考，再看代碼解析再思考，最后評(píng)論區(qū)留下你的見解！
body {
filter: grayscale(1); // 1相當(dāng)于100%
}分享原因
這段代碼展示了如何使用 CSS 濾鏡來(lái)將整個(gè)網(wǎng)頁(yè)變?yōu)榛叶刃Ч?/span>
在特殊的日子里，網(wǎng)頁(yè)有整體變灰色的需求，可以使用這段代碼，這個(gè)需求很有必要。
再就是做一些老照片或黑白電影的效果，也可以使用這段代碼。
代碼解析
1. 選擇器 body
這一部分選擇了 HTML 文檔的 <body> 元素，即整個(gè)網(wǎng)頁(yè)的主體。
CSS 的 filter 屬性通常用于圖像，但也可以應(yīng)用到其他任何 HTML 元素上。
2. grayscale(1);
grayscale 濾鏡將元素的顏色變成灰度效果。
參數(shù) 1 表示 100% 灰度，參數(shù) 0 表示無(wú)灰度效果。
3. filter 所有屬性值 大盤點(diǎn)！
CSS 的 filter 屬性提供了多種圖形效果，且這些屬性值可以組合用起來(lái)，且可以應(yīng)用于任何元素。
以下是 filter 屬性的所有值及其詳細(xì)解釋：
blur()
功能：應(yīng)用模糊效果。
參數(shù)：接受一個(gè)長(zhǎng)度值（如 px、em），默認(rèn)值是 0。
示例：filter: blur(5px);
brightness()
功能：調(diào)整圖像的亮度。
參數(shù)：接受一個(gè)數(shù)值，1 為原始亮度。值小于 1 會(huì)降低亮度，值大于 1 會(huì)增加亮度。
示例：filter: brightness(0.5);
contrast()
功能：調(diào)整圖像的對(duì)比度。
參數(shù)：接受一個(gè)數(shù)值，1 為原始對(duì)比度。值小于 1 會(huì)降低對(duì)比度，值大于 1 會(huì)增加對(duì)比度。
示例：filter: contrast(200%);
drop-shadow()
功能：應(yīng)用陰影效果。
參數(shù)：類似于 box-shadow，包括偏移量、模糊半徑和顏色。
示例：filter: drop-shadow(10px 10px 10px #000);
grayscale()
功能：將圖像變?yōu)榛叶取?/span>
參數(shù)：接受一個(gè) 0 到 1 之間的數(shù)值，0 為無(wú)灰度，1 為完全灰度。
示例：filter: grayscale(1);
hue-rotate()
功能：旋轉(zhuǎn)圖像的色相。
參數(shù)：接受一個(gè)角度值，單位為度（deg）。
示例：filter: hue-rotate(90deg);
invert()
功能：反轉(zhuǎn)圖像的顏色。
參數(shù)：接受一個(gè) 0 到 1 之間的數(shù)值，0 為無(wú)效果，1 為完全反轉(zhuǎn)。
示例：filter: invert(1);
opacity()
功能：調(diào)整圖像的透明度。
參數(shù)：接受一個(gè) 0 到 1 之間的數(shù)值，0 為完全透明，1 為完全不透明。
示例：filter: opacity(0.5);
saturate()
功能：調(diào)整圖像的飽和度。
參數(shù)：接受一個(gè)數(shù)值，1 為原始飽和度。值小于 1 會(huì)降低飽和度，值大于 1 會(huì)增加飽和度。
示例：filter: saturate(2);
sepia()
功能：將圖像變?yōu)樽睾稚?/span>
參數(shù)：接受一個(gè) 0 到 1 之間的數(shù)值，0 為無(wú)效果，1 為完全棕褐色。
示例：filter: sepia(1);
url()
功能：引用 SVG 濾鏡。
參數(shù)：接受一個(gè) URL，指向一個(gè)包含 SVG 濾鏡的文件。
示例：filter: url(#filter-id);
- end -
源：進(jìn)擊的Coder
今天是 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)站包括主頁(yè)和內(nèi)容也都已經(jīng)變成了灰色，比如百度、B 站、愛(ài)奇藝、CSDN 等等。
CSDN
愛(ài)奇藝
百度
大家可以看到全站的內(nèi)容都變成灰色了，包括按鈕、圖片等等。這時(shí)候我們可能會(huì)好奇這是怎么做到的呢？
有人會(huì)以為所有的內(nèi)容都統(tǒng)一換了一個(gè) CSS 樣式，圖片也全換成灰色的了，按鈕等樣式也統(tǒng)一換成了灰色樣式。但你想想這個(gè)成本也太高了，而且萬(wàn)一某個(gè)控件忘記加灰色樣式了豈不是太突兀了。
其實(shí)，解決方案很簡(jiǎ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(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;各個(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ǎn)單介紹了一下今天觀察到的網(wǎng)站變灰的實(shí)現(xiàn)，也學(xué)習(xí)了 filter 的更詳細(xì)的用法，希望有幫助。
[1] SVG filter element: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter
最后，跟大家分享今天看到的，對(duì)我觸動(dòng)頗深的一段話：
“如果有后人來(lái)撰寫今天的歷史，那他們將發(fā)現(xiàn)沒(méi)有任何文字詞藻能夠?qū)懕M這場(chǎng)災(zāi)難的殘酷，也沒(méi)有任何語(yǔ)言修辭能描述人類為生存所付出的艱苦卓絕的努力。
我們將懷揣火種走過(guò)黑暗長(zhǎng)夜，跨過(guò)戰(zhàn)友的遺骸，踏過(guò)荊棘和深淵，最終在累累尸骨上重新點(diǎn)燃種族延續(xù)的火炬。
我知道你們并不需要?dú)v史來(lái)記載功勛，也無(wú)謂那些空虛華美的稱頌。
只要山川河流、千萬(wàn)英靈，見證過(guò)我們前仆后繼的跋涉和永不放棄的努力。”
—— 敬平凡的人類
緬懷逝者，致敬英雄
愿疫情早日結(jié)束，再無(wú)傷痛！
色顯示百度首頁(yè)
今天早上醒來(lái)一看各大網(wǎng)站，為表示新冠肺炎疫情死難者的哀悼，各大網(wǎng)站均將頁(yè)面變?yōu)榛疑@示，顯示的極為莊重肅穆。本文主要介紹常用網(wǎng)頁(yè)頁(yè)面快速變灰色的方法。
對(duì)于網(wǎng)頁(yè)而言，頁(yè)面色彩、布局等主要受到層疊樣式文件CSS控制，網(wǎng)站頁(yè)面整體色彩的改變可以通過(guò)CSS進(jìn)行整體的控制。在CSS中可以通過(guò)filter濾鏡屬性實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)元素進(jìn)行圖像、背景及素材的渲染。
Filter調(diào)整測(cè)試Demo
如上圖所示，通過(guò)設(shè)置Filter的屬性取值，實(shí)現(xiàn)對(duì)顏色色彩的控制。主要屬性說(shuō)明如下：
1、filter: blur()方法
該方法主要用于實(shí)現(xiàn)對(duì)圖像設(shè)置高斯模塊，及屏幕上的像素融合程度即模糊程度。其參數(shù)需要以像素值形式進(jìn)行提供。參數(shù)值越大模糊程度越高。示例如下圖：
網(wǎng)頁(yè)中顯示的圖標(biāo)
在未使用filter屬性未設(shè)置時(shí)，顯示的原始圖片效果如上圖所示。我們可以進(jìn)一步對(duì)頁(yè)面添加style樣式調(diào)整filter blur參數(shù)值，可實(shí)現(xiàn)頁(yè)面的模糊程度。如blur參數(shù)取值為2個(gè)像素，效果如下：
blur參數(shù)取值為2顯示效果
2、filter: grayscale()方法
該方法是用于實(shí)現(xiàn)頁(yè)面變灰的主要方法，主要用于設(shè)置頁(yè)面顯示的灰度。參數(shù)值需要以百分比形式進(jìn)行提供，0%表示未進(jìn)行灰度調(diào)整，100%表示將頁(yè)面完全轉(zhuǎn)化為灰度。我們還是以圖標(biāo)為例，對(duì)其進(jìn)行灰度設(shè)置進(jìn)行說(shuō)明。當(dāng)灰度取值設(shè)置為20%時(shí)效果如下圖1所示，當(dāng)灰度值設(shè)置為100%時(shí)效果如圖2所示：
圖一：灰度20%設(shè)置顯示效果
圖二：灰度100%設(shè)置圖片顯示效果
使用filter提供的 grayscale()方法對(duì)頁(yè)面進(jìn)行灰度設(shè)置實(shí)現(xiàn)效果描述如上圖，我們可以快速實(shí)現(xiàn)將頁(yè)面快速變灰。目前瀏覽器的內(nèi)核型號(hào)較多，對(duì)CSS的支持與解析情況不相同，在進(jìn)行頁(yè)面灰度處理時(shí)需要考慮到用戶終端瀏覽器的類型，需要進(jìn)行CSS樣式的兼容性設(shè)置。實(shí)現(xiàn)基本代碼描述如下：
-webkit-filter: grayscale(100%);
//(Apple Safari內(nèi)核)
-moz-filter: grayscale(100%);
//(Firefox瀏覽器)
-ms-filter: grayscale(100%);
//(Internet Explorer（IE）瀏覽器)
-o-filter: grayscale(100%);
//(Opera瀏覽器)在明確網(wǎng)頁(yè)變灰所需使用濾鏡效果之后，我們可以使用其屬性進(jìn)行頁(yè)面變灰效果。以下給出本人編寫的一個(gè)簡(jiǎn)單Demo進(jìn)行變灰測(cè)試，原始頁(yè)面效果如下：
測(cè)試原始頁(yè)面
按照編碼要求，我們?cè)谠擁?yè)面頭部<head>編寫樣式文件，實(shí)現(xiàn)變灰處理，所添加代碼描述如下：
變灰實(shí)現(xiàn)代碼
在頁(yè)面添加變灰代碼之后，我們可以看出明顯的變灰效果，效果描述如下：
頁(yè)面變灰實(shí)現(xiàn)效果
本文給出了網(wǎng)頁(yè)頁(yè)面變灰的實(shí)現(xiàn)簡(jiǎn)單方法，作為網(wǎng)頁(yè)設(shè)計(jì)人員、前端開發(fā)人員應(yīng)當(dāng)能夠掌握基本使用方法，實(shí)現(xiàn)頁(yè)面的快速改變。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
