一、眼見為實
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宣告是千萬不能少的：
|
1 |
border-right: 20px solid transparent; |
四、關於相容性
IE13+支援，Chrome和FireFox瀏覽器支援，移動端iOS支援，Android4.4+支援。也就是，基本上，移動端現在可以使用這種技術了。
既節約了流量，也讓我們的開發更簡單，維護更方便了。
五、結語碎碎念
其實，本文的技術發明（主要是透明border的處理）在“drop-shadow vs box-shaow”這篇文章完成後就研究出來了。本來想寫個小專利，蹭點早飯錢。結果，新廠子寫專利沒費用，而且週期要3年。
3年我兒子都可以打醬油了。所以，罷了，直接分享出來。
今天8號，本月已經6篇文章了，寫文章暴走了下。就是為了騰出大段且連續的業餘時間，要祕密進行其他大專案。
時光機
如果你是3~5年之後看到此文，而且你是2016年上大學的，那麼，我在寫這篇文章的時候，你可能正在翻來覆去睡不著，還在焦慮明天的考試。總之，不要擔心，我給大家找了一個非常硬的後臺，保證你們這次高考無憂，放心睡覺吧！喲，你在好奇是哪個後臺。嘻嘻嘻嘻，說出來怕嚇著你————觀音菩薩！