IT工程師數位筆記本

本內容只要是對張鑫旭PNG格式小圖標的CSS任意顏色賦色技術的這篇文章進行詳細說明。

HTML：

<i class="icon"><i class="icon icon-del"></i></i>

CSS：

.icon{
　　display: inline-block;
　　width: 20px;
　　height: 20px;
　　overflow: hidden;
}
.icon-del{
　　background:url(delete.png) no-repeat center;
}
.icon>.icon{
　　position:relative;
　　left:-100%;
　　border-right: 20px solid transparent;
　　-webkit-filter: drop-shadow(blue 20px 0);
　　filter: drop-shadow(blue 20px 0);
}

效果：

　　當然還可以弄成其他顏色，只需要改變一下filter: drop-shadow(blue 20px 0); 里面的blue這個顏色。

　　這個原理就是利用filter過濾器的drop-shadow投影，也就是生成一個新的圖標，然后我們給這個新圖標添加顏色。

　　我們給父元素設置寬和高以及overflow:hidden，然后讓這個子元素正常的圖片left:100%讓它隱藏，再通過border-right來設置一個寬度為圖片寬度的transparent透明邊框，最后給它加投影就好了。