一、眼見為實
CSS可以修改圖片的顏色，沒錯，可以，眼見為實！您可以狠狠地點擊這裡：png小圖標CSS賦色demo
上面的不是很黑的是原始圖標，是個PNG圖片，下面這個是可以賦色的：
下面，我們隨意選擇一個顏色，例如紫色，然後：
是不是感覺很厲害！以後設計師就不需要在提供幾套顏色的圖片了。
SVG, icon fonts等技術似乎也不是那麼耀眼了。
二、原理其實很簡單
原理其實很簡單，使用了CSS3濾鏡filter中的drop-shadow，drop-shadow濾鏡可以給元素或圖片非透明區域添加投影。
如果對drop-shadow不是很瞭解，建議先看看前些時間寫的“CSS3 filter:drop-shadow濾鏡與box-shadow區別應用”一文！
對於背景透明的png小圖標而言，如果我們施加一個不帶模糊的投影，不就等同於生成了另外一個顏色的小圖標了嗎？
然後，我們把原始圖標隱藏在容器外面，投影圖標在容器中間，不見給人感覺是賦色效果了？
比方說本文的demo，如果把icon父級的的overflow:hidden去掉，原始的圖標就暴露出來啦！
三、實現的時候實際有難度
原理如上面，我一開始實現的時候，以為很簡單，因為分分鐘可以實現自己的想法，後來發現有些天真了，Chrome瀏覽器怎麼都顯示不出來；FireFox瀏覽器卻可以！咦，究竟發生了什麼。
在Chrome瀏覽器下，drop-shadow有一個如下的呈現特性：
在Chrome瀏覽器下，如果一個元素的主體部分，無論以何種方式，只要在頁面中不可見，其drop-shadow是不可見的；實體部分哪怕有1像素可見，則drop-shadow完全可見。
所以，我試過：
- text-indent負值隱藏原始圖，無投影，失敗！
- clip剪裁隱藏，無投影，失敗！
- margin負值隱藏原始圖，無投影，失敗！
- left負值隱藏原始圖，無投影，失敗！
通通不行，實現遇到了巨大的阻礙。
後來，靈光一現，如果我實體部分也在可視區域內，但是是透明的，會怎樣呢（反正不會有投影出來）？
於是，我就試了下曾經立下無數戰功的透明邊框，臥槽，又立功了，成了！
因此，下面這一個CSS聲明是千萬不能少的：
border-right: 20px solid transparent;
四、關於兼容性
IE13+支持，Chrome和FireFox瀏覽器支持，移動端iOS支持，Android4.4+支持。也就是，基本上，移動端現在可以使用這種技術了。
既節約了流量，也讓我們的開發更簡單，維護更方便了。
原文：https://www.zhangxinxu.com/wordpress/2016/06/png-icon-change-color-by-css/
閱讀更多 前端圈 的文章
