CSS3 滤镜

1. 亮度

filter: brightness(0.2)
0~1 变暗
大于1 变亮

        div {
            width: 200px;
            height: 200px;
            background: url(./1.jpg) no-repeat center/200px 200px;
            margin: auto;
        }
        
        div:hover {
            filter: brightness(0.2)
        }

2. 对比度

filter：contrast（百分比）；黑的更黑，白的更白

        div:hover {
            filter: contrast(200%)
        }

3. 模糊

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

        div:hover {
            filter: blur(10px);
        }

4. 色调

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

        div:hover {
            filter: grayscale(100%)
        }

        div:hover {
            filter: sepia(1);
        }