Sample code for changing the color of a png image through a CSS3 filter

This method uses the drop-shadow filter in CSS3 to generate a projection of any color on the non-transparent part of the png image, and then hides the original image, thereby achieving the purpose of changing the color of the image. See the effect first

Next is the code

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

Note that one of the key points

border-right: 20px solid transparent;

In Chrome, if the main body of an element is not visible on the page in any way, its drop-shadow is invisible; if the main body is visible even by 1 pixel, the drop-shadow is completely visible.

Since we used overflow:hidden to hide the original icon, its projection cannot be displayed normally on the Chrome browser. We solve this problem by adding a transparent border.

Summarize

This is the end of this article about changing the color of PNG images through CSS3 filter. For more relevant content about changing the color of PNG images with CSS, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!