CSS改变png图片颜色

来源：互联网发布：matlab化简矩阵编辑：程序博客网时间：2024/05/16 09:45

来源地址：http://www.zhangxinxu.com/wordpress/?p=5429

张鑫旭大神的个人网站上看到的，纯属分享和记录

css

div.icon{height:20px;width:20px;overflow: hidden;}            .icon .icon{width: 20px;height: 20px;display:block;position: relative;left: -20px;border-right: 20px solid transparent;                background: url(img/icon.png) no-repeat;-webkit-filter: drop-shadow(#000 20px 0);filter: drop-shadow(#000 20px 0);               }

html

<div class="icon">            <span class='icon' id='icon'></span>        </div>        <input type="color" id='color' />

document.getElementById('color').onchange = function(){            var c = this.value;            document.getElementById('icon').style.webkitFilter = 'drop-shadow('+c+' 20px 0)';        }

在谷歌、火狐手机端、都是可以用的，使用的技术是css 里滤镜里的投影，具体看原文

代码地址

0 0