css改變透明背景png圖片的圖標顏色

 

HTML:

<p><strong>原始圖標</strong></p>
<i class="icon icon-del"></i>

<p><strong>可以變色的圖標</strong></p>
<i class="icon"><i class="icon icon-del"></i></i>

 

CSS:

body {
    padding: 100px;
}

.icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    overflow: hidden;
    /*background: lightcoral;*/
}

.icon-del {
    background: url("delete.png") no-repeat center;
}

.icon > .icon {
    position: relative;
    left: -32px;
    border-right: 32px solid transparent;/*必不可少*/
    -webkit-filter: drop-shadow(32px 0 0 red);
    filter: drop-shadow(32px 0 0 red);
}

 

效果：

 

 

 

 

學習來自[張鑫旭的空間]