哀悼疫情，全站灰色如何實現，CSS濾鏡一行代碼實現

庚子清明，以國家之名哀悼，以國家之名哀悼在新冠肺炎疫情中犧牲的烈士和逝世的同胞！

向抗疫英雄致敬！

 

 

今日打開各樣的app，各大電商，愛奇藝都是灰色的

這里我也一直很好奇該功能，前端如何實現，了解過后發現這個CSS濾鏡，點擊了解更多

 

寫下隨筆記錄一波

 

如果去實現，作為程序員，copy能力，搜索能力肯定不能弱(~~此處調侃而已)，一定要有洞察力，對不?直接F12，瞧瞧看，到底腫么費事。

能控制整站，肯定是根元素，直接從body找，我們發現一個filter (濾鏡)屬性，去掉后發現網站恢復了

 

好起來了，是不，顯而易見！

這里說一下

filter: grayscale(100%);和filter: grayscale(1); 效果是一樣的，百分比的話就可以根據百分比去調節了

filter: grayscale(100%);
filter: grayscale(90%);
filter: grayscale(80%);
filter: grayscale(70%);
filter: grayscale(60%);
filter: grayscale(50%);

 

效果預覽

寫個腳本遍歷所有的屬性，並都看看效果：

 const url = "https://www.baidu.com/img/[e-mail]";
    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;

 

 濾鏡的玩法還有很多，具體請看菜鳥或者w3cshool,詳細講解