CSS常用滤镜属性讲解

1. 高斯模糊滤镜

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

代码语言：javascript复制

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

代码语言：javascript复制

img{
            filter: blur(10px);
   }

效果

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

代码语言：javascript复制

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

代码语言：javascript复制

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

这下我们接着看效果图

边缘是不是变得更清晰了

2. 亮度调整滤镜

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

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

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

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

代码

代码语言：javascript复制

filter:brightness(0%)

效果

代码

代码语言：javascript复制

filter:brightness(150%)

3. 对比度调整滤镜

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

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

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

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

代码语言：javascript复制

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

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

代码语言：javascript复制

filter: contrast(150%);

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

4. 灰度滤镜

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

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

代码语言：javascript复制

filter: grayscale(1);

5. 图像反转滤镜

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

代码语言：javascript复制