CSS3图片过滤器

CSS3图片过滤器

  <style>
        .a{
            /* blur(px)	给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊； */
            filter: blur(8px)
        }

        .b{
            /*brightness(%)亮度 使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。可以大于100%更亮 */
            filter:brightness(45%)
        }
        .c{
            /* contrast(800%) 对比度值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100% */
            filter: contrast(800%)
        }
        .d{
            /* 颜色饱和度 */
            filter: saturate(700%)
        }
        .e{
            /* 透明度 */
            filter: opacity(50%)
        }
        .f{
            /* 将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化   grayscale(%)灰度图像。*/
            filter: sepia(50%)
        }
        .g{
            /* 给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。 */
            filter: hu