关于css:使用css的filter写鼠标滑过效果

应用 css 的 filter 写鼠标滑过成果

<div class="filter-div">
  <img class="filter-img" src="../assets/images/01list.png"/>
</div>
<style>
    .filter-div {
      width: 67px;
      height: 50px;
      background: #fff;
      &:hover {background: #5d7aae;}
    }
    .filter-img {
      width: 67px;
      height: 50px;
      &:hover {filter: brightness(100);
      }
    }
</style>

鼠标没有放上之前

鼠标放上之后

这里用到 css filter:brightness(100) 给图片利用一种线性乘法，使其看起来更亮或更暗。如果值是 0% 或者 0，图像会全黑。值是 100%，则图像无变动。其余的值对应线性乘数成果。值超过 100% 也是能够的，图像会比原来更亮。如果没有设定值，默认是 1，如果想染图片设置成红色，值为 100。