网页从灰色变为彩色的讨论

网页从灰色变为彩色的讨论

分析

想必大家都感受到了，很多网站、APP在昨天都变灰了，变灰的原因是为了纪念一位伟人。

• 先来感受一下变灰后的效果

那么这种灰色的效果怎么实现的呢？如何做到图片、文字、按钮都变灰的效果呢？

如果是换一套灰色的UI那显然成本太大了，用脚指头想一想就知道不太可能，其实很简单，我们在浏览器开发者模式中会发现背后的秘密

没错，就是一个小家伙😄：grayscale()(将图像转换为灰度)

大致的意思就是，grayscale是一个CSS函数，可以把图像转成灰色，参数是个百分比，结果返回一个filter函数，filter函数可以用来改变图像的显示效果，用于CSS的filter属性

说人话就是加了一个gray类，作用类似于遮罩层

• 注：filter 函数可选项有以下这些

  blur() ：模糊图像

  brightness() ：使图像更亮或更暗

  contrast() ：增加或减少图像的对比度

  drop-shadow() ：在图像后面应用阴影

  grayscale() ：将图像转换为灰度

  hue-rotate() ：更改图像的整体色调

  invert() ：反转图像的颜色

  opacity() ：使图像透明

  saturate() ：对输入图像进行超饱和或去饱和处理

  sepia() ：将图像转换为棕褐色

---

变回彩色

解决办法一：手动删除class=gray

删除前

删除后

---

解决办法二：写一个油猴脚本

(function() {
    //创建一个元素
    var globalCss = document.createElement("style");
    //设置这个元素的类型 <style type = "text/css"></style>
    globalCss.type = "text/css";
    //获取head标签,并把<style type = "text/css"></style>添加进去
    document.getElementsByTagName("head")[0].append(globalCss)
    //设置style标签的样式
    globalCss.appendChild(document.createTextNode("*{-webkit-filter:none !important;}"));
})();


//要注意脚本中的@match正则匹配问题：
//@match匹配适用的网址，对所有网址适用则可为：*://*/*

• 效果

---

后记

技术实现起来也比较简单

最后，缅怀一下伟人，感谢他为中国的发展所做出的一切！

---