前言
2020年4月4日早上10點(diǎn) , 全國(guó)性哀悼活動(dòng)正式開展 , 在向逝去的生命和前線壯烈犧牲的烈士致哀同時(shí) , 依舊不忘加班 , 如往常打開瀏覽器 , 然后發(fā)現(xiàn) , 基本上所有的網(wǎng)站都變灰了 , 在哀傷的同時(shí) , 就想到一個(gè)問題 , 這樣全部顏色和交互效果都變灰了 , 到底是怎么做的 , 具體的工作量是多大呢 ? 帶著這個(gè)問題 , 我開始我的探索之旅
先來幾張已經(jīng)發(fā)生底色改變的網(wǎng)站
CSDN
百度
依然是一樣灰色調(diào)
博客園
依然是一樣灰色調(diào)
知乎
知乎居然沒做出改變
簡(jiǎn)書
依然是一樣灰色調(diào)
B站
還是熟悉的灰色調(diào)
淘寶
依然是灰色調(diào)
基于現(xiàn)象剖析
以上就是部分網(wǎng)站的情況 , 很明顯 , 這個(gè)底色改變 , 仿佛所有網(wǎng)站都出現(xiàn)了 , 這樣做出改變 , 對(duì)于程序員來說 , 工作量會(huì)不會(huì)很大呢 , 帶著這個(gè)疑問 , 我打開了控制臺(tái)
那么分析問題怎么開展呢 ?
既然是整個(gè)頁面都是灰色調(diào) , 那么就可以直接了當(dāng)?shù)膹膆tml節(jié)點(diǎn)開始查看了
首先我打開了CSDN控制臺(tái) , 查看html節(jié)點(diǎn) , 果不其然 , 我們可以看到一個(gè)熟悉的身影 , 一個(gè)css3的新屬性filter(后面會(huì)講) , 簡(jiǎn)單來說就是一個(gè)濾鏡效果的css熟悉
然后嘗試把這個(gè)屬性取消掉 , 原色調(diào)的CSDN就回來了
按照這個(gè)尿性 , 我打開了百度的控制臺(tái) , 發(fā)現(xiàn)百度是沒有放在html標(biāo)簽上面的 , 那么我就開始尋找引入進(jìn)來的css文件 , 先從頭部的css文件找齊
一頓分析可以得知filter很大可能在 , id為css_index的標(biāo)簽里面(這就是html語義化的優(yōu)點(diǎn)) , 然后我們拿到這個(gè)id="css_index"標(biāo)簽下所有的css屬性 , 粘貼到我們的本地
拉取到本地的css文件出現(xiàn)了兩處filter , 暴力處理 , 把兩處filter刪除 , 然后再替換百度首頁的對(duì)應(yīng)的css文件
原色調(diào)的百度首頁回來了
其他的網(wǎng)站有些是靜態(tài)資源服務(wù)器返回來的文件 , 就沒有去做改變了 , 這里我們就改變網(wǎng)站基色調(diào)的是一個(gè)filter屬性 , 那么filter屬性是怎么樣的呢
分析filter屬性
先看看MDN是怎么解釋filter的
filterCSS屬性將模糊或顏色偏移等圖形效果應(yīng)用于元素。濾鏡通常用于調(diào)整圖像，背景和邊框的渲染。
CSS標(biāo)準(zhǔn)里包含了一些已實(shí)現(xiàn)預(yù)定義效果的函數(shù)。你也可以參考一個(gè)SVG濾鏡，通過一個(gè)URL鏈接到SVG濾鏡元素(SVG filter element)。
filter: url("../../media/examples/shadow.svg#element-id");
filter: blur();
filter: contrast();
filter: grayscale();
filter: hue-rotate();
filter: drop-shadow() invert();
filter: url("../../media/examples/shadow.svg#element-id");
URL函數(shù)接受一個(gè)XML文件，該文件設(shè)置了 一個(gè)SVG濾鏡，且可以包含一個(gè)錨點(diǎn)來指定一個(gè)具體的濾鏡元素.
filter: blur(5px);
給圖像設(shè)置高斯模糊。“radius”一值設(shè)定高斯函數(shù)的標(biāo)準(zhǔn)差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；如果沒有設(shè)定值，則默認(rèn)是0；這個(gè)參數(shù)可設(shè)置css長(zhǎng)度值，但不接受百分比值。
filter: blur(5px); // 模糊度 , 數(shù)值越大越模糊
filter: contrast();
顏色反差
調(diào)整圖像的對(duì)比度。值是0%的話，圖像會(huì)全黑。值是100%，圖像不變。值可以超過100%，意味著會(huì)運(yùn)用更低的對(duì)比。若沒有設(shè)置值，默認(rèn)是1。
filter: contrast(0%);
filter: contrast(1500%);
filter: grayscale();
將圖像轉(zhuǎn)換為灰度圖像。值定義轉(zhuǎn)換的比例。值為100%則完全轉(zhuǎn)為灰度圖像，值為0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設(shè)置，值默認(rèn)是0。
filter: grayscale(); 灰度 , 有效值為 ( 0%, 100% )
filter: hue-rotate(90deg);
給圖像應(yīng)用色相旋轉(zhuǎn)?！癮ngle”一值設(shè)定圖像會(huì)被調(diào)整的色環(huán)角度值。值為0deg，則圖像無變化。若值未設(shè)置，默認(rèn)值是0deg。該值雖然沒有最大值，超過360deg的值相當(dāng)于又繞一圈。
filter: hue-rotate(100deg); 色調(diào)旋轉(zhuǎn)
具體的屬性及實(shí)現(xiàn)可以查看
https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
瀏覽器支持度
我們看看這個(gè)屬性的瀏覽器支持度
ie11以下是不支持的 , EDGE不知道支不支持 , 我電腦沒有 , 所以就沒辦法確定
我們用ie瀏覽器打開以下
果然是不支持的
總結(jié)
很多時(shí)候 , 當(dāng)遇到一些節(jié)日或者紀(jì)念日或者活動(dòng)的時(shí)候 , 我們的網(wǎng)站整體色調(diào)就要發(fā)生改變 , 我們要盡量使用一些css3的屬性 , 減少已經(jīng)落地的項(xiàng)目的代碼侵入 , 今天哀悼日的基礎(chǔ)灰色調(diào) , 就是依賴filter屬性實(shí)現(xiàn)的 , 繼續(xù)需要保持對(duì)新特性的高敏感度
