css3改变图片颜色

css3改变图标颜色，用到filter（滤镜）这个属性（注意，是需要纯色的图片，白色背景或者透明背景的图片），下面看例子吧

<div class="main">
            <img class="img1" src="http://img.tgimg.cn/Home/share-icon.png" /><br />
            <img class="img2" src="//img.tgimg.cn/Mproject/v5/new_subscribe.png" /><br />
            <img class="img3" src="//img.tgimg.cn/Project/newLogin/close-btn-hover.png" /><br />
            <img class="img4" src="//img.tgimg.cn/Project/newJuniorDetail/contacts-ico.png" /><br />
            <img class="img5" src="//img.tgimg.cn/Project/newJuniorDetail/query-icon.png" /><br />
            <img class="img6" src="//img.tgimg.cn/Project/newJuniorDetail/close-photo-pop.png" /><br />
        </div>

.img1 {
    display: block;
    width: 22px;
    height: 24px;
    background: url('http://img.tgimg.cn/Home/share-icon.png');
    -webkit-filter: drop-shadow(200px 0 0 #f60);
    /* Chrome, Safari, Opera */
    filter: drop-shadow(200px 0 0 #f60);
}

.img2 {
    display: block;
    width: 196px;
    height: 196px;
    background: url('http://img.tgimg.cn/Mproject/v5/new_subscribe.png');
    -webkit-filter: drop-shadow(200px 0 0 #f60);
    filter: drop-shadow(200px 0 0 #f60);
}

.img3 {
    display: block;
    width: 16px;
    height: 16px;
    background: url('//img.tgimg.cn/Project/newLogin/close-btn-hover.png');
    -webkit-filter: drop-shadow(200px 0 0 #f60);
    filter: drop-shadow(200px 0 0 #f60);
}

.img4 {
    width: 67px;
    height: 72px;
    -webkit-filter: drop-shadow(200px 0 0 #f60);
    filter: drop-shadow(200px 0 0 #f60);
}

.img5 {
    width: 66px;
    height: 66px;
    -webkit-filter: drop-shadow(200px 0 0 #f60);
    filter: drop-shadow(200px 0 0 #f60);
}

.img6 {
    width: 24px;
    height: 24px;
    -webkit-filter: drop-shadow(200px 0 0 #f60);
    filter: drop-shadow(200px 0 0 #f60);
}

看图

574b0e39c521f7e65b31c0a72d5889d.png