应用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>

电脑鼠标沒有放上以前
无Hover

电脑鼠标放上以后
有Hover

这儿采用css filter:brightness(100)给照片运用一种线形乘法，使其看上去更亮或更暗。假如值是0%或是0，图象会黑色。值是100%，则图象无转变。别的的值相匹配线形乘数实际效果。值超出100%也是能够的，图象会比原先更亮。假如沒有设置值，默认设置是1，假如想染照片设定成乳白色，数值100。

由于传统式的hover给img换src第一次hover的情况下会让照片闪白，由于必须再次载入照片，那样做的益处便是照片只必须载入一次，自然这类作法也是有局限性性的，热烈欢迎纠正

到此这篇有关应用css的filter写电脑鼠标滑过实际效果的完成实例的文章内容就详细介绍到这了,大量有关css的filter电脑鼠标滑过內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！