最近暴雪一款叫《守望先鋒》的遊戲火到不行，身邊很多人都深受其毒害，雖然博主自己沒有買（窮），但是耳濡目染也了解了個大概。
由於之前大致學習了一下 css 濾鏡的各種用法，所以心血來潮結合二者做一個 DEMO。
大家應該見過一種“選人”效果，一排黑白或其他單色的角色照片，選中的角色照片變為彩色。我想即使沒有在網頁中見過，在其他地方也一定見過。
親切嗎？就是上圖這種。
那在 web 中該怎麽實現呢，很多人會認為用兩張圖片，一張黑白一張彩色，切換圖片地址。這種方法隨便想想就有很多弊端，其實 css 中的濾鏡可以很輕松的完成這件事。
老規矩，先上 DEMO 和 源碼。
這個 DEMO 只是使用了一個濾鏡效果，加上過渡和簡單的動畫，但逼格立刻提升不少。這也是 css 的神奇之處，一個圓角、一點陰影、一點過渡動畫，短短幾行代碼就能給人完全不一樣的視覺或交互體驗。
核心還是我們的 filter 屬性，下面介紹下它都有哪些濾鏡效果。
為了減少不必要的代碼，下面的例子中均不使用瀏覽器前綴 hack，但濾鏡的支持不是很好，所以在實際編寫時一定要把前綴加完整。
Sepia
filter: sepia(1);
該濾鏡會將圖片的色相值收斂到35-40，產生一種老舊照片的感覺。且 sepia 接受的參數只能為 1 或者 100%，其他數值均不會產生任何效果。如果你要的效果就是這樣做舊的感覺，OK大功告成。如果不是，那接著往下看。
Saturate
filter: saturate(3);
該濾鏡用於設置圖片的飽和度，它接收一個非負數值作為參數，為 0 時圖片為純黑白效果。
Hue-rotate
filter: hue-rotate(60deg);
該濾鏡用於指定圖片色相值的具體偏移量，它接收一個角度值作為參數，可正可負。
Grayscale
filter: grayscale(1);
該濾鏡會降低圖片的色值使其變為灰色，它與 sepia 接受的參數一致，只有 1 和 100% 有效。
Invert
filter: invert(1);
該濾鏡會產生反色效果，參數也只接收 1 或 100%。
Blur
filter: blur(3px);
該濾鏡就是我們上篇博文用到的模糊效果，其接收一個非負的像素值作為參數。
Opacity
filter: opacity(.5);
該濾鏡會產生透明效果，參數為 0-1 之間的小數或百分比。
Brightness
filter: brightness(3);
該濾鏡用於提升圖片亮度，當參數小於等於 0 時，為全黑。
Contrast
filter: contrast(3);
該濾鏡用於提升對比度，當參數小於等於 0 時，為全灰。
css 的濾鏡主要是上面這些，需要提示的是濾鏡不是同時只能用一種，你可以通過組合來達到自己想要的效果，比如下面：
filter: sepia(1) saturate(4) hue-rotate(300deg);
參考——《CSS揭秘》
感謝你的瀏覽，希望能有所幫助
Tags: 瀏覽器 filter 圖片 技巧 照片
文章來源：