一行代码全站变灰 – CSS filter 属性

　　12月13日，是第6个南京大屠杀死难者国家公祭日，很多大站为了表示纪念，将网站界面改成了灰色。打开B站时发现它也全站变灰了，好奇代码是怎么实现 的。是css自定义属性吗？是引入一份css吗？是预处理器修改全局变量吗？结果，打开控制台，浏览了一下，最后定位发现在于一行css代码，关掉就变成彩色了：

filter: grayscale(100%);

　　没错，就这么简单！我们马上来看看 filter 这个滤镜效果具体还有什么值可选。赶紧的写个 js 脚本遍历所有的属性，并都看看效果：

const url = "https://www.baidu.com/img/baidu_resultlogo@2.png";
let html = "";
[
{
name: "灰度100%",
style: "grayscale(100%)"
},
{
name: "模糊5px",
style: "blur(5px)"
},
{
name: "3倍亮度",
style: "brightness(300%)"
},
{
name: "200%对比度",
style: "contrast(200%)"
},
{
name: "200%饱和度",
style: "saturate(200%)"
},
{
name: "色相旋转180度",
style: "hue-rotate(180deg)"
},
{
name: "100%反色",
style: "invert(100%)"
},
{
name: "50%透明度",
style: "opacity(50%)"
},
{
name: "阴影",
style: "drop-shadow(10px 5px 5px #f00)"
},
{
name: "100%透明度",
style: "opacity(100%)"
},
{
name: "褐色程度70%",
style: "sepia(70%)"
}
].forEach(({ name, style }) => {
html += `<div&gt;${name}-${style}: <img src=${url} /></div><br />`;
});
document.body.innerHTML = html;