图片使用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);}