CSS3中强大的filter(滤镜)属性使用详细解说

╰半橙微兮° 2023-02-22 10:48 50阅读 0赞

![format_png][]

--------------------

在CSS3新增加的属性中有一个属性较为特殊，那就是filter属性，该属性一般来说是用于元素本身的装饰，使页面产生更多的显示特效。今天我们就来详细了解该属性。

![format_png 1][]

亮度

#### 属性名称 ####

**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>

![format_png 2][]

###     ###

![format_png 1][]

对比度

#### 属性名称 ####

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

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

![format_png 3][]

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

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

![format_png 4][]

![format_png 1][]

模糊

#### 属性名称 ####

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

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

![format_png 5][]

###     ###

![format_png 1][]

色调

#### **属性名称：灰色色阶** ####

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

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

![format_png 6][]

#### **属性名称：褐色色阶** ####

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

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

![format_png 7][]

###     ###

![format_png 1][]

饱和度

#### 属性名称 ####

**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>

![format_png 8][]

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

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

> 多谢各位观看, 我是万章, 前端是一桌丰盛的大餐，当我们能够深挖进去时便能够享受其无边的美味，如果有同学想要和万章老师一起享受这份饕餮大餐, 可以加我的**QQ:647789540**，我们一起开饭啦!

![format_png 9][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9sR2x2b0tIblJVSmJ3OHU5bjFwb3dYOWJ4cXplZHhDYmdsRFFtYUFzOUZ5RVc0dDB2VU90ODlJVnNLY0l6aWJXb2s4bFNqSUtQdDhGSzRzdExJV0hFbFEvNjQw?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9VZDgwTmZ3Q3lLdjdyZHVESFJjZmFyUGhBTWY5SWN1bEJxSU5QMnBOUTNxNE12NEJrZ0ppY0lRajJSVGRDUmpmMGhuM3o4T3BTcHVtWHAxbTFUMEFvV3cvNjQw?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9sR2x2b0tIblJVS1ZSaWNzbTRMbmR1QWRUTnp2MHgzTm5CRW1wa083QlE3aWJmaDAyS2FQbldtQ0tQdTl3aWNmemMzRlZIcXgySHBLcHJkWWdCbXpCSGsxdy82NDA?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9sR2x2b0tIblJVS1ZSaWNzbTRMbmR1QWRUTnp2MHgzTm5hbGc2bklOaWNmVmZnb0FOcjR6R0V4NGppY2twd0k3TVBLT2VYTGRJWG83UEhDaWNRYXk2eGlhQWVRLzY0MA?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9sR2x2b0tIblJVS1ZSaWNzbTRMbmR1QWRUTnp2MHgzTm5hNUxLdDhRZVpsOFpyaWFYNkdWb2d4YmpvYXpuRU5IWEdWa0hIQTQ2cVJSbFRPNGljRVlKV09Zdy82NDA?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9sR2x2b0tIblJVS1ZSaWNzbTRMbmR1QWRUTnp2MHgzTm5LQjVoTk4xVzhra1BNNUdFYUFvVFkxOXI3SXBkaWFORGdOcnU4dVoyeEJLd3l3SDRpY2xiSnZlQS82NDA?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9sR2x2b0tIblJVS1ZSaWNzbTRMbmR1QWRUTnp2MHgzTm5aRExHTkxCeVpHd0RscUdvQ0xtNXVuaWFsV3lJMWhBaWJJZHJ6QnpyY25ibVgxS1BXVzNTaWNjWXcvNjQw?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9sR2x2b0tIblJVS1ZSaWNzbTRMbmR1QWRUTnp2MHgzTm5hb1kxWWliSDRhZThXZlhMaGRpYnJlT01nbTNsRk03cjl4c1BGc1FvVXZGYng2NDZNT1pEcUlWZy82NDA?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9sR2x2b0tIblJVS1ZSaWNzbTRMbmR1QWRUTnp2MHgzTm5QVVRjN1JDNUJtQXN3dERtZjQwNWJ0VUpRc3Z0ZGVOQUhjc2FwdkhUcVIwd2ljWlU0UzB2RHFBLzY0MA?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9sR2x2b0tIblJVSmJ3OHU5bjFwb3dYOWJ4cXplZHhDYm9zd042MFJpYjlyWHlsVllIR0FIMG5kRnBOMzVXbXhKdkxsT3FPR3BuOWljN1QzeFJrYXc4ZFJBLzY0MA?x-oss-process=image/format,png