一行代碼實(shí)現(xiàn)網(wǎng)頁置灰, 看完就會(huì)
大廠技術(shù) ?? 高級(jí)前端 ?? Node進(jìn)階
點(diǎn)擊上方? 程序員成長指北 ，關(guān)注公眾號(hào)
回復(fù) 1 ，加入高級(jí)Node交流群
前言
大家一定都發(fā)現(xiàn)，有些特殊情況下，百度百科上會(huì)把搜索信息頁面灰化，這兩天訪問各大網(wǎng)站的時(shí)候，發(fā)現(xiàn)在基本都灰化了，各網(wǎng)站都以一種互聯(lián)網(wǎng)的風(fēng)格來哀悼。
截了幾個(gè)常用的網(wǎng)站樣式，看一下變灰的效果：
iconfont:
掘金：
B站：
哀悼的同時(shí)也接到公司產(chǎn)品的需求，需要緊急將網(wǎng)站變灰以示哀悼，這里就給大家順便講下全網(wǎng)站灰色化的實(shí)現(xiàn)。
css3 filter 實(shí)現(xiàn)方案
這種需求讓設(shè)計(jì)出圖也不太現(xiàn)實(shí)， 只能靠開發(fā)快速處理。首先查到的就是采用css3 filter來實(shí)現(xiàn)。
filter(濾鏡)
filter:?none?|?blur()?|?brightness()?|?contrast()?|?drop-shadow()?|?grayscale()?|?hue-rotate()?|?invert()?|?opacity()?|?saturate()?|?sepia()?|?url();
屬性值說明：
-
none: 默認(rèn)值。 -
blur(): 給圖像設(shè)置高斯模糊。 -
brightness(): 給圖片應(yīng)用一種線性乘法，使其看起來更亮或更暗。 -
contrast(): 調(diào)整圖像的對(duì)比度。 -
drop-shadow(): 給圖像設(shè)置一個(gè)陰影效果 -
grayscale(): 將圖像轉(zhuǎn)換為灰度圖像。 -
hue-rotate(): 給圖像應(yīng)用色相旋轉(zhuǎn)。 -
invert(): 反轉(zhuǎn)輸入圖像。 -
opacity(): 轉(zhuǎn)化圖像的透明程度。 -
saturate(): 轉(zhuǎn)換圖像飽和度。 -
sepia(): 將圖像轉(zhuǎn)換為深褐色。 -
url(): URL函數(shù)接受一個(gè)XML文件，該文件設(shè)置了一個(gè)SVG濾鏡，且可以包含一個(gè)錨點(diǎn)來指定一個(gè)具體的濾鏡元素。
對(duì)filter不是很熟悉的小伙伴，強(qiáng)烈推薦看看 MDN文檔,直接給了頁面demo，可以直觀看效果：
image.png從filter屬性值不難看出來grayscale 就是我們要的。
使用?grayscale?來實(shí)現(xiàn)效果
可以設(shè)置 grayscale()來調(diào)整灰度值，對(duì)頁面整體實(shí)現(xiàn)灰化，具體實(shí)現(xiàn)如下：
html?{
????filter:?grayscale(100%);
????-webkit-filter:?grayscale(100%);
????-moz-filter:?grayscale(100%);
????-ms-filter:?grayscale(100%);
????-o-filter:?grayscale(100%);
}
如果想針對(duì)局部實(shí)現(xiàn)，可以設(shè)置一個(gè)類名：
.gray_mode?{
????filter:?grayscale(100%);
????-webkit-filter:?grayscale(100%);
????-moz-filter:?grayscale(100%);
????-ms-filter:?grayscale(100%);
????-o-filter:?grayscale(100%);
}
但是filter存在兼容性問題，在IE上不支持：
很多網(wǎng)站也是選擇了直接放棄IE，例如淘寶、京東等：
如果你要在IE瀏覽器實(shí)現(xiàn)， 可以參考這篇文章：https://zhuanlan.zhihu.com/p/444778014， 我們網(wǎng)站實(shí)現(xiàn)時(shí)借鑒的就是文章中的方案。
Node 社群
我組建了一個(gè)氛圍特別好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你對(duì)Node.js學(xué)習(xí)感興趣的話（后續(xù)有計(jì)劃也可以），我們可以一起進(jìn)行Node.js相關(guān)的交流、學(xué)習(xí)、共建。下方加 考拉 好友回復(fù)「Node」即可。
如果你覺得這篇內(nèi)容對(duì)你有幫助，我想請(qǐng)你幫我2個(gè)小忙：
1. 點(diǎn)個(gè) 「在看」 ，讓更多人也能看到這篇文章 2. 訂閱官方博客? www.inode.club? 讓我們一起成長點(diǎn)贊和在看就是最大的支持 ??