网页从灰色变为彩色的讨论
分析
想必大家都感受到了,很多网站、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匹配适用的网址,对所有网址适用则可为:*://*/*
- 效果
后记
技术实现起来也比较简单
最后,缅怀一下伟人,感谢他为中国的发展所做出的一切!
评论区