CSS3滤镜属性详解

Posted 2021-04-09 筑梦前端

亮度

属性名称

filter：brightness（倍数）；当倍数值大于1的时候元素会变亮，小于1的时候元素会变暗 该属性的作用为调整元素当前的亮度，一般来说可以适用于鼠标悬浮到某元素时的提醒作用

.goal{
       width:100px;
       height:100px;
       background-color:orange;
       transition: 0.5s;
   }
   .goal:hover{
       filter: brightness(2.1);
    }
   <div class="goal"></div>

---

对比度

属性名称

filter：contrast（百分比）；所谓对比度，简单理解的话就是一个区域里面每个颜色都会变得格外显眼，黑的更黑，白的更白

.goal{
       width:100px;
       height:100px;
       background-color:orange;
       transition: 0.5s;
   }
   .goal:hover{
       filter: contrast(110%);
    }
   <div class="goal"></div>

当元素只有一种颜色时，该属性看效果和变亮看上去差不多，如果我们给该元素设置一个背景图片的话，那就是另一回事了

.goal{
       width:100px;
       height:100px;
       background-image:url("3.png");
       transition: 0.5s;
   }
   .goal:hover{
       filter: contrast(200%);
    }
   <div class="goal"></div>

---

模糊

属性名称

filter：blur（模糊半径）；给图像设置高斯模糊。模糊半径的值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；

.goal{
       width:100px;
       height:100px;
       background-image:url("3.png");
       transition: 0.5s;
   }
   .goal:hover{
       filter: blur(10px);

    }
   <div class="goal"></div>

---

色调

属性名称：灰色色阶

filter：grayscale（）；该属性的作用较为简单，就是将一个颜色复杂的区域改造成一个只有黑白二色的区域。圆括号里面的值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；

属性名称：褐色色阶

filter：sepia（）；该属性的作用同上，都是将某个区域的颜色进行简化，该属性会将一个颜色丰富的区域变成一种老黑白照片效果，让图片有一种轻微泛黄的样子

.goal{
       width:100px;
       height:100px;
       background-image:url("3.png");
       transition: 0.5s;
   }
   .goal:hover{
        filter: sepia(1);
    }
   <div class="goal"></div>

---

饱和度

属性名称

filter：saturate（%）；转换图像饱和度。圆括号里面的值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。随着饱和度的增加，颜色就会更“清楚”。饱和度越小，颜色就会越“淡”；

.goal{
       width:100px;
       height:100px;
       background-image:url("3.png");
       transition: 0.5s;
   }
   .goal:hover{
       filter: saturate(100%);

    }
   <div class="goal"></div>

该图片随着饱和度的增加，颜色变得越来越鲜艳

以上为滤镜属性中使用较多的属性值，此外还有一些使用较少的属性值，比如：drop-shadow、hue-rotate、invert等，如果各位小伙伴有兴趣的话，可以对这些属性深入的研究一下