侧边栏壁纸
博主头像
老十三

敬年少热诚!

  • 累计撰写 31 篇文章
  • 累计创建 36 个标签
  • 累计收到 7 条评论

目 录CONTENT

文章目录

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

老十三
2022-12-05 / 0 评论 / 6 点赞 / 126 阅读 / 593 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-12-05,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

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

分析

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

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

image-20221205203618860

image-20221205203721792

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

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

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

image-20221205212321057

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

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

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

    blur() :模糊图像

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

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

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

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

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

    invert() :反转图像的颜色

    opacity() :使图像透明

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

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


变回彩色

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

删除前

image-20221205204551546

删除后

image-20221205204931671

image-20221205204737689


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

(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匹配适用的网址,对所有网址适用则可为:*://*/*
  • 效果

image-20221205211328791


后记

技术实现起来也比较简单

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


6

评论区