css-filter让png和svg图片变色

css-filter让png和svg图片变色

这里项目中只使用到一张没有颜色的png图片，实现效果为hover时改变图片和边框的颜色![2]

hover前

hover后

这里主要用到的就是css的filter这个属性，至于为什么会用到这个属性，主要原因是接手了别人的项目，别人使用的是图片切换的形式来实现active的效果的。但是现在需要hover也有这种效果。并且查看了相关的代码，发现他的图片是跟路由联系在一起的，而且图片的路径也是动态传入的，在js上比较难改。所以决定使用css来实现这个效果。其实，如果是字体图标的话，写CSS就是很简单的。但是问题的关键就在于，他用的不是字体图标，而是图片，想了很多方法都没有办法实现，最后用了css的filter才得以实现。下面就是一些代码。看起来比较简单，但是在探索的过程用了很长的时间，关键是在于margin-left 和 filter: drop-shadow的位置控制，控制的好，我们就可以让原图出去这个盒子被隐藏了，然后把带颜色图片的盒子放到大盒子的中间，实现hover的切换。

代码实现：

<template>
  <div class="home">
    <div class="mybox">
      <div class="img_box">
        <img src="@/assets/icon-0-allsearch.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
    }
  },
  methods: {
  }
}
</script>

<style lang="less" scoped>
.home {
  .mybox {
    margin-left: 400px;
    width: 200px;
    height: 200px;
    background-color: var(--bgc);
    cursor: pointer;
    border: 1px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
    .img_box{
      width: 50px;
      height: 50px;
      overflow: hidden;
      img{
         width: 50px;
         height: 50px;
      }
    }
  }
  .mybox:hover{
    border: 1px solid #d4b021;
  }
  .mybox:hover .img_box img{
    margin-left: -100px;
    filter: drop-shadow(50px 0 0 #d4b021);
  }
}
</style>

另外需要注意的是css的filter属性的兼容性问题。目前我试过的浏览器中只有IE使用不了。还是说能兼容大部分的浏览器的。

另外就是filter: drop-shadow的四个值，我贴一下，大家可以参考

filter: drop-shadow(x偏移量 y偏移量 模糊半径 颜色);

另外，filter也还有一个比较实用的功能，就是将有颜色的图片弄成灰色的图片。

实现效果

代码：

<template>
  <div class="about">
    <img src="@/assets/logo.png" alt="" />
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.about {
  img {
    -webkit-filter: grayscale(1); /* Webkit */
    filter: gray; /* IE6-9 */
    filter: grayscale(1); /* W3C */
  }
}
</style>

如果你看不懂这个代码的话，你可以试试我的demo，地址：https://github.com/rui-rui-an/css-filter-hover