图片使用css3滤镜改变图片颜色

使用css3滤镜改变图片的颜色

我们在开发页面的时候，会遇到同一张图片滑过或点击的时候改变图片背景或颜色，一般情况下UI设计师会给我们两套图片，但是我们为了节约资源可以利用css3滤镜来做到改变图片背景或颜色。

例如

上图中的图片有两种颜色，一般UI会给两套图片，如果是需要节约资源UI只给了，一套图片需要前端自己去改变图片的颜色。所以在这里我们就用到了css3的滤镜 filter: drop-shadow

代码如下

<div class="ailine_item_box">
    <div class="ailine_item_img ailine_imgurl3"></div>
</div>

/* 图片设置背景图 */
.ailine_item_box{
    height: 100px;
    width: 100px;
    position: absolute;
    top: 87px;
    left: 134px;
    overflow: hidden;
}
.ailine_item_img{
    height: 92px;
    width: 100px;
	background-size: 100px 92px;
	position: relative;
    left: -100px;
    border-right: 100px solid transparent;
    -webkit-filter: drop-shadow(100px 0px #fff);
    filter: drop-shadow(100px 0px #fff);
}
.ailine_imgurl3{
    background: url('../img/ai-tu4.png') no-repeat 0 0;
}

这是通过filter: drop-shadow生成一个镜像，然后把原来的图片隐藏，保留生成的镜像，达到改变图片颜色。如果需要改变图片颜色字需要更改filter: drop-shadow的颜色值，如下

.ailine_item:hover .ailine_item_img{
    -webkit-filter: drop-shadow(100px 0px #D6A77B);
    filter: drop-shadow(100px 0px #D6A77B);
}