CSS遮罩實現PNG圖標變色

本文節選自「純CSS實現任意格式圖標變色的研究」一文。

原圖標以下，是個藍色的：

下面要變成#f4615c紅色的圖標，最簡單的方法就是使用遮罩。

以下HTML和CSS代碼：

<span class="colorful"></span>複製代碼

.colorful {
    display: inline-block;
    width: 32px; height: 32px;
    background-color: #f4615c;
    -webkit-mask: url(./xin.svg) no-repeat;
    mask: url(./xin.svg) no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}複製代碼

CSS3 mask默認是基於透明度實現遮罩效果的。也就是實色區域顯示，透明區域隱藏。所以，咱們只須要把目標圖標顏色#f4615c做爲背景色，而後原始圖標（不管什麼顏色均可以）做爲遮罩圖片，效果就出來了。

眼見爲實，您能夠狠狠地點擊這裏：CSS mask遮罩實現任意顏色的小圖標demo

效果以下截圖：

CSS3遮罩很是好用，熟練掌握事半功倍，其知識點不少，包含的屬性值也不少，有興趣能夠參考我以前的文章：「CSS遮罩CSS3 mask/masks詳細介紹」，很是系統的介紹了相關知識點。

以上，感謝閱讀！