走进css之filter

背景

你是否还记得今年的4·4全国哀悼日？全国和驻外使领馆下半旗志哀，全国停止公共娱乐活动，以表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼。细心的你有没有发现大批量的网站都将网站的主题色变成了灰色？那么在不考虑兼容的情况下，如何快速的实现该功能呢？

其实实现这个功能只需要两行css（filter）即可完成。

html{
    -webkit-filter: grayscale(100%);
    filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);
}

CSS3 filter（滤镜）属性的定义

filter属性定义了元素（通常是< img >）的可视效果（例如：模糊与饱和度）。

css3 filrer 语法

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

效果图

使用

 .blur {
        -webkit-filter: blur(4px);
        filter: blur(4px);
    }
    /*给图像设置高斯模糊，值越大越模糊，不接受百分比值*/
    .brightness {
        -webkit-filter: brightness(0.30);
        filter: brightness(0.30);
    }
    /*给图片应用一种线性乘法，使其看起来更亮或更暗，如果值是0%，图像会全黑。值是100%，则图像无变化。大于100%，则图像会比原来更亮*/
    .contrast {
        -webkit-filter: contrast(180%);
        filter: contrast(180%);
    }
    /*调整图像的对比度。值是0%的话，图像会全灰。值是100%，图像不变。大于100%，意味着会运用更低的对比，图片更光亮*/
    .grayscale {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
    }
    /*将图像转换为灰度图像*/
    .huerotate {
        -webkit-filter: hue-rotate(180deg);
        filter: hue-rotate(180deg);
    }
    /*给图像应用色相旋转*/
    .invert {
        -webkit-filter: invert(100%);
        filter: invert(100%);
    }
    /*反转输入图像*/
    .opacity {
        -webkit-filter: opacity(50%);
        filter: opacity(50%);
    }
    /*转化图像的透明程度*/
    .saturate {
        -webkit-filter: saturate(7);
        filter: saturate(7);
    }
    /*转换图像饱和度。*/
    .sepia {
        -webkit-filter: sepia(100%);
        filter: sepia(100%);
    }
    /*将图像转换为深褐色。*/
    .shadow {
        -webkit-filter: drop-shadow(0px 0px 20px #0099cc);
        filter: drop-shadow(0px 0px 20px #0099cc);
    }
    /*给图像设置一个阴影效果。阴影是合成在图像下面，
    drop-shadow(水平方向阴影偏移量 垂直距离阴影偏移量 值越大越模糊 阴影颜色)
    drop-shadow(<offset-x>(必须)  <offset-y>(必须) <blur-radius> (可选) <color> (可选) )
    */
    .minix {
        -webkit-filter: contrast(200%) brightness(150%);
        filter: contrast(200%) brightness(150%);
    }
    /*使用多个滤镜，每个滤镜使用空格分隔。*/