南顺网络

扫一扫微信二维码

4月4号清明节网站都变灰了,你知道是怎么做的么?

南顺网络 2020-04-07 09:12 经验之谈 67

   4月4号所有的公共娱乐活动也全部停止,包括直播、综艺、影视、游戏等等,如果你有打开过抖音 APP ,看到的几乎全都是我们这次的抗疫英雄,我觉得,抖爸爸这次干的漂亮,英雄们值得被这样宣传。

       这个清明节,我想我们很多人在今后的很多年中都不会忘记,这一刻,我们参与了历史,同时成为了历史的见证者。

可以看到,这些网站的全站内容都变成灰色的了,包括按钮、图片、文字等信息。

不知道大家有没有对他们是如何变灰的产生问号,反正我是产生了。

我第一个反应是重写了 css 样式,图片做了替换。但又想了下这样这做恐怕花费的精力人力都太大了,一不小心还会弄错,“危险性”极高

所以带着这个问题,我按下了键盘上神圣的 F12 去寻找答案。

果然,这个答案就简单的躺在浏览器的调试窗口中。

打开某某的首页,按下 F12 后,看到在 html 上面增加了一个样式

html.o2_gray { -webkit-filter: grayscale(100%); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }

手动取消颜色就恢复正常了

有区别的某博客网站逛了下

html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

可以看到,这两个网站的这个这个 css 修饰的对象都是 html ,是作用全局的,而且在 某博客 的代码要比某东的长很多,兼容性好很多。

带有 webkit 前缀的意思是在 webkit 内核的浏览器中生效,比较常见的有 Chrome 、 搜狗高速浏览器 、 360极速版等等一大堆浏览器;而带有 moz 前缀的意思是在 firefox 中生效;带有 ms 前缀的含义是 IE ;带有前缀 o 的是指 Opera (欧朋)浏览器,

这里其实就是直接在全部的 DOM 元素上增加了一个 filter ,百度上搜一下 filter ,可以找到一个 

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像,背景和边框的渲染。

CSS标准里包含了一些已实现预定义效果的函数。你也可以参考一个SVG滤镜,通过一个URL链接到SVG滤镜元素(SVG filter element)。

其实就已经很明显了,直接给图片设置 filter: grayscale(percent) 就好了。

并且我们还可以在参数中设置灰度的百分比,从 0% 到 100% ,随便设置,当然如果不设置的化,默认是 0 ,就是没有灰度。

最后再看下 filter 对浏览器的兼容性,同样是由官方提供:

对 PC 端的 IE 没有做支持,基本上是都支持了,而且还对 mobile 端的 Firefox 和 PC 端的 Firefox 的 SVG 单独做了加持,基本上可以放心的使用,