CSS常用滤镜属性讲解

1. 高斯模糊滤镜

为图像设置高斯模糊,值越大越模糊, 默认是0,既不模糊. 值的单位是PX

<img src="./010.jpg" alt="" width="500px">

img{
            filter: blur(10px);
   }

效果

但是我们发现图片的边缘也模糊了 如何解决这个问题,也很简单.只要在外面包一层div 设置超出隐藏就行了

<div class="out">
        <img src="./010.jpg" alt="" width="500px">
    </div>

    .out{
           width: 500px;
           overflow: hidden;
    }
    img{
         filter: blur(10px);
    }

这下我们接着看效果图

边缘是不是变得更清晰了

2. 亮度调整滤镜

通过设置brightness(%)来调整图片的亮度,

如果值为 0% 图像会全黑.

如果值为100%,图像无变化.

如果值为100%之上,图像会变得更亮 默认值是1

代码

filter:brightness(0%)

效果

代码

filter:brightness(150%)

3. 对比度调整滤镜

通过设置contrast(%)来调整图片的亮度, 单位可以是百分比 和 小数 表示

如果值为 0% 图像会全黑.

如果值为100%,图像无变化.

如果值为100%之上,图像的对比度更加强,意味着图片的鲜艳度更强 默认值是1

/* 两行代码效果相等 */
filter: contrast(50%);
filter: contrast(0.5);
/* 两行代码效果相等 */

可以看到图片颜色灰度增加了

filter: contrast(150%);

图片更加鲜艳了 白的更白,黑的更黑

4. 灰度滤镜

通过设置grayscale(%)将图片转换成灰度图片,值可以是小数和百分数.默认 0

当值超过100%时完全转换成灰度图片,当值为0% 图像无变化

filter: grayscale(1);

5. 图像反转滤镜

上了点年纪的人一般见过胶卷相机，照片的底片那种效果其实就是图片反转效果。比如将黑色反转成白色，其它颜色也反转成其相反的颜色。使用invert(%)可以对其进行控制，其值可以是0-1之间的小数或者百分比，默认值为0。值为100%的时候是完全反转，与0时图像无变化。为50%的时候，所有色彩都变成灰色。

filter: invert(0.5);

filter: invert(1);

6. 透明度调整滤镜

和css设置元素透明度效果一样,不过这个使用滤镜实现的

filter: opacity(0.5);

7. 饱和度滤镜

通过设置saturate(%)调整图片的饱和度大小, 当值超过100%时图片饱和度增高,色彩就会变重. 当值为0% 图像完全不饱和 当值为100% 图像无变化

 filter: saturate(350%);

8. 复古滤镜

将图片调成深褐色 通过sepia(%)可以将图像调整为深褐色，可以很容易的营造出发黄、复古的效果。该函数的值为0-1之间的数字或者百分比，默认值为0。当值为100%时，图像完全变成深褐色的，值为0%图像无变化。

  filter: sepia(100%);

9. 色相旋转滤镜

通过hue-rotate(deg)可以将图像进行色相旋转。所谓色相旋转，就是指将图像中的各种颜色按照给定的角度在色相环中旋转成新的对应颜色。该函数默认值是Odeg，其值可以上不过超过360deg相当于又转了一圈。

filter: hue-rotate(180deg);

原图:

小结

使用filter属性的方法是在CSS样式中指定一个或多个滤镜函数，比如filter: blur(5px) grayscale(0.5)。每个滤镜函数都有一个或多个参数，用来控制滤镜效果的强度

• url()：引用一个SVG文件中定义的滤镜
• blur()：模糊图像
• brightness()：调整图像的亮度
• contrast()：调整图像的对比度
• drop-shadow()：给图像添加阴影
• grayscale()：将图像转换为灰度
• hue-rotate()：旋转图像的色相
• invert()：反转图像的颜色
• opacity()：调整图像的透明度
• saturate()：调整图像的饱和度
• sepia()：将图像变成棕褐色

你可以按照任意顺序组合多个滤镜函数，它们会按照从左到右的顺序依次应用到元素上