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

本方法是通过CSS3滤镜 filter 中的 drop -s hadow 将 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>

&nbs p;

.icon {
    dis play : inline-block;
    width: 20px; h ei ght: 20px;
    overflow: hidden;
}
.icon-del {
    background: url(delete.png) no-re PE at  center ;
}
.icon > .icon {
    pos IT ion: 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;

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

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

总结

到此这篇关于通过css3的filter滤镜改变png图片的颜色的 文章 就介绍到这了,更多相关CSS改变png图片颜色内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

总结

以上是 为你收集整理的 通过css3的filter滤镜改变png图片的颜色的示例代码 全部内容，希望文章能够帮你解决 通过css3的filter滤镜改变png图片的颜色的示例代码 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于通过css3的filter滤镜改变png图片的颜色的示例代码的详细内容...