通过css3的filter滤镜改变png图片的颜色的示例代码

本方法是通过CSS3滤镜 filter 中的 drop-shadow 将png图片的非透明部分生成任意颜色的投影，然后将原始图片隐藏起来，从而达到改变图片颜色的目的
先看效果图

接下来是代码

<p><strong>原始图标</strong></p> <i class="icon icon-del"></i> <p><strong>可以变色的图标</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); }

注意其中很关键的一处

border-right: 20px solid transparent;

在Chrome浏览器下，如果一个元素的主体部分，无论以何种方式，只要在页面中不可见，其drop-shadow是不可见的；实体部分哪怕有1像素可见，则drop-shadow完全可见。

由于我们使用使用 overflow:hidden 隐藏掉了原始图标，所以导致其投影在Chrome浏览器上是无法正常显示的，我们通过加透明的边框来解决这一点。

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!