改变图片颜色

原理就是用到css3 滤镜filter中的drop-shadow,该滤镜可以给图片非透明区域添加投影
语法:

filter:drop-shadow(水平阴影偏移距离 垂直阴影偏移距离 投射的阴影颜色 );
1
首先准备一张背景色透明的图片如下:

用一个div将该图片包裹住,给图片添加:

filter: drop-shadow(15px 0px #fff)

这段代码,代表投射出一个和该图片一样的形状,

三个参数分别代表:

水平向右移动15px,
垂直方向不变,
投射出的形状颜色为白色。

接下来我们将原图设置在div外部并隐藏,变色后的投影放置在div中

完整代码为:



   
       
       
       
   
   
         


            

                
            

      

   

你可能感兴趣的:(css,css3,javascript)