您的位置: 开心技术乐园 > 技术仓库 > 网站技术 > 阅读文章

一行代码全站变灰 – 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>${name}-${style}: <img src=${url} style="filter: ${style}" /></div><br />`;
    });
    document.body.innerHTML = html;
    • 本文标签:无
    • 人气热度:259
    • 生产日期:2019年12月16日 - 9时18分22秒