您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)如何通過css3的filter濾鏡改變png圖片顏色,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
本方法是通過CSS3濾鏡 filter
中的 drop-shadow
將png圖片的非透明部分生成任意顏色的投影,然后將原始圖片隱藏起來,從而達(dá)到改變圖片顏色的目的
先看效果圖
接下來是代碼
<p><strong>原始圖標(biāo)</strong></p> <i class="icon icon-del"></i> <p><strong>可以變色的圖標(biāo)</strong></p> <i class="icon"><i class="icon icon-del"></i></i>
.icon { display: inline-block; width: 20px; height: 20px; overflow: hidden; } .icon-del { background: url(delete.png) no-repeat center; } .icon > .icon { position: relative; left: -20px; border-right: 20px solid transparent; -webkit-filter: drop-shadow(#0033FF 20px 0); filter: drop-shadow(#0033FF 20px 0); }
注意其中很關(guān)鍵的一處
border-right: 20px solid transparent;
在Chrome瀏覽器下,如果一個(gè)元素的主體部分,無論以何種方式,只要在頁面中不可見,其drop-shadow是不可見的;實(shí)體部分哪怕有1像素可見,則drop-shadow完全可見。
由于我們使用使用 overflow:hidden
隱藏掉了原始圖標(biāo),所以導(dǎo)致其投影在Chrome瀏覽器上是無法正常顯示的,我們通過加透明的邊框來解決這一點(diǎn)。
關(guān)于“如何通過css3的filter濾鏡改變png圖片顏色”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。