css 3フィルタimgアイコンを変色

img小アイコン変色
以前は、画像が直接色を変えることができないため、マウスを浮かべたときにアイコンが変色する必要がありました.ここではcss 3のフィルタで変色する効果を共有します.

html  


    <img src="images/wei.png" alt="">
div> 
  
css  

div{
    width:20px;
    height:20px;
    overflow：hidden;
}
div:hover img{
    transform: translateY(-20px);
    filter: drop-shadow(#fff 0 20px);
    //  、x    、y    
}
  
コードは  で、  はimgの で divを んで、hoverの にimgの  をdivから して して、それからフィルタの ぎた を の  に いて、それによって を える  を  します.
  
 filterのパラメータは、x、y オフセット、シャドウブラー、シャドウ  、シャドウカラーの5つあり、x、y オフセットは  です.
  
   :IE 13+サポート、ChromeとFireFoxブラウザサポート、モバイル iosサポート、Android 4.4+サポート.