CSS3 filter through the PNG picture to change the color of the sample code

Time:2021-5-11

This method is through CSS3 filterfilterIndrop-shadowThe non transparent part of the PNG image is projected with any color, and then the original image is hidden, so as to change the color of the image
Look at the renderings first

示例图片

Next is the code

<p>< strong > Original Icon < / strong ></p>
<i class="icon icon-del"></i>
<p>< strong > icons that can change color</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);
}

Pay attention to one of the key points

border-right: 20px solid transparent;

In Chrome browser, if the main part of an element is not visible on the page in any way, its drop shadow is not visible; Even if one pixel of the solid part is visible, the drop shadow is completely visible.

Because we useoverflow:hidden The original icon is hidden, so its projection cannot be displayed normally in Chrome browser. We solve this problem by adding a transparent border.

summary

Here is the article about changing the color of PNG image through CSS3 filter. For more information about CSS changing the color of PNG image, please search previous articles of developer or continue to browse the following articles. I hope you can support developer more in the future!