[导读]：12月13日，是第6个南京大屠杀死难者国家公祭日，很多大站为了表示纪念，将网站界面改成了灰色。打开B站时发现它也全站变灰了，好奇代码是怎么实现 的。是css自定义属性吗...
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>${name}-${style}: <img src=${url} style="filter: ${style}" /></div><br />`;
});
document.body.innerHTML = html;
本文来自投稿，不代表微盟圈立场，如若转载，请注明出处：https://www.vm7.com/a/jc/11170.html
