昨天网站都变灰了,你知道是怎么做的么?

昨天是 2020 年 4 月 4 日,清明节。

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

2020 年从过年到现在,我们的国家遭遇了非常惨痛的经历,很多英雄在救助他人的路上倒下,更有很多烈士保卫人民的安危遇难,全国下降半棋,北京时间上午 10 点,全国拉响防空警报,默哀 3 分钟,来致敬逆行的英雄。

同时,所有的公共娱乐活动也全部停止,包括直播、综艺、影视、游戏等等。

在昨天,如果你有打开过抖音 APP ,看到的几乎全都是我们这次的抗疫英雄,我觉得,抖爸爸这次干的漂亮,英雄们值得被这样宣传。

截至4月2日,全国共有60名公安民警和35名辅警牺牲在抗击疫情和维护安全稳定第一线,用宝贵生命谱写了一曲曲人民公安为人民的英雄赞歌。

截止4月3日,已有41位抗疫牺牲殉职医生和护士,2020年我们已经痛失13名院士,沉痛悼念。愿天堂再无病痛!

我也在这里也向全国抗击新冠肺炎疫情斗争牺牲的烈士和逝世的同胞表达深切的哀悼,向所有在抗战在疫情前线的工作和医护人员致敬。

网站变灰

昨天早晨一觉醒来,打开浏览器,整个互联网都变灰了,一开始还以为自己色盲了,后来才反应过来,不禁为自己的智商感到担忧。

不过在网上冲浪一圈,可以看到很多我们常用的网站都变成了灰色的:

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

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

我第一个反应是重写了 css 样式,图片做了替换。

先不说我上面这个想法好不好使哈,我上面想到的这个方案,肯定替换成本是相当高的,万一哪里没写对,再搞点幺蛾子出来,这个事情就有点玩大了。

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

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

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

手动把这里样式取消掉,看到网页恢复了正常的颜色,具体代码如下:

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

再去我最常逛的 CSDN 看一圈:

具体代码如下:

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 ,是作用全局的,而且在 CSDN 的代码要比某东的长很多,首先讲一下,长不一定是好的,但是这个代码一看就要兼容性好很多。

带有 webkit 前缀的意思是在 webkit 内核的浏览器中生效,比较常见的有 Chrome 、 搜狗高速浏览器 、 360极速版等等一大堆浏览器;而带有 moz 前缀的意思是在 firefox 中生效;带有 ms 前缀的含义是 IE (不得不说 CSDN 连 IE 都还在支持我也是惊了);带有前缀 o 的是指 Opera (欧朋)浏览器(这个在国内是真的没什么用户,不过讲真的还可以,我用过一段时间,后面是投向了 Chrome 的怀抱)。

原理

这里其实就是直接在全部的 DOM 元素上增加了一个 filter ,百度上搜一下 filter ,可以找到一个 MDN 的官方文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

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

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

简单来讲,其实就是在所有的元素前面加了一个滤镜,跟我们平时看很多妹子拍完照片后加滤镜是一个意思(希望我的女性读者看到这里不要打我)。

这里官方也给出了一个小示例,如下:

怎么样,是不是看着很好玩的样子。

官方还给出了使用示例:

/* URL to SVG filter */
filter: url("filters.svg#filter-id");

/* <filter-function> values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* Multiple filters */
filter: contrast(175%) brightness(3%);

/* Global values */
filter: inherit;
filter: initial;
filter: unset;

各种用法的示例在官方文档上已经给的很清楚了,有兴趣的小伙伴可以自己去看下,想在线练习可以直接打开官方提供的 CodeOpen 或者 JSFiddle 链接,直接在线改改,非常的 easy 。

我们回到上面的问题,其实就已经很明显了,直接给图片设置 filter: grayscale(percent) 就好了。

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

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

可以看到,出了对 PC 端的 IE 没有做支持,基本上是都支持了,而且还对 mobile 端的 Firefox 和 PC 端的 Firefox 的 SVG 单独做了加持,基本上可以放心的使用,不过从这里也可以看到,前面 CSDN 对 IE 浏览器增加的前缀是没啥用的,希望 CSDN 的前端同学看到了不要打我(手动逃跑)。

参考

https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

原文地址:https://www.cnblogs.com/babycomeon/p/12636731.html

时间: 2024-11-10 07:01:04

昨天网站都变灰了,你知道是怎么做的么?的相关文章

国家哀悼日 - 网站全局变灰

国务院公告:4月4日举行全国性哀悼活动,哀悼抗疫牺牲烈士和逝世同胞.因此,在自己网站上加上下面一段CSS代码,就能把网站全局变灰了. <style type="text/css"> html { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100

别人网站都赚钱了,为什么你却失败了?

为何他人做网站挣钱了,而我做网站却颗粒无收呢? 在我国存在着数千万计的网站,可是绝大多数的站长都在不断的思考着这么的一个问题.那么,到底是为何呢,作为一名从业15年的锐拓君来告诉你下面的一些认知. 一:你的喜好不是他人的喜好 ? 咱们常常说一句话:人各有志,每自己都有本身不一样的志趣,一样每自己的喜好.喜爱也都是不一样的.你所喜欢的,他人未必就钟意,许多人做网站通常都是凭仗自己喜爱来挑选. ? 你可能会说:我国人这么多,总有人的喜好与我是一样的,这一点也不否定,不然就没有:志同道合者一说了.可是

大型网站都是用什么语言

大型网站都是用什么语言写的(转)  小凡 2015-10-09 15:23:14 看看现在大型网站都是用什么语言写的? 不排除一个网站用多种技术!如淘宝是Java+php,底层是java,表现层是php.新浪,网易,腾讯应该也是用了多种技术. 据说是这样的:php,新浪,雅虎等用php较多.淘宝,腾讯用java较多.一般的部署是这样的:php,.net做前端视图的调用,和简单逻辑应用.像雅虎前cto说的那样,能用php的地方我们尽量用php.对性能要求稍高,逻辑复杂,维护量大,更改频繁的地方一般

目前网络上大部分的网站都是由ASP或PHP开发,并且java平台的软件购买成本不适合中小企业客户,一般适用于银行、国家安全等行业领域

目前网络上大部分的网站都是由ASP或PHP开发,并且java平台的软件购买成本不适合中小企业客户,一般适用于银行.国家安全等行业领域. 要求建设开发大型复杂的网站,但仅有一个idea,不能够提供网站详细要求的客户.大型网站的建设开发的过程,是一个严谨的有详细规范的逻辑流程,必须要形成文字(文档)形式的网站建设需求,炎帝科技才能够在网站设计/网站开发的过程中控制网站建设项目质量,顺利成功完成.此类最典型的客户口头禅就是“我要做一个类似facebook的网站”,“我要做淘宝那样的网站”,此类客户自己

做站群SEO网站对站群服务器的要求高吗?做站群网站都需要注意哪些?

下面是本人做站群SEO的几年来大致总结的一些经验.如有肤浅谬误的地方,还请各位高手大虾海涵.以 下内容仅供交流学习,本着互惠互利的原则,希望对各自黑猫优化的技术手段有所提升.觉得本人编辑 的内容属于小儿科的请直接无视. 一. 域名的选择 做站群网站对域名的选择是很关键的,不过究竟是新域名好还是老域名好,这就要看老域名本身的旧网 站SEO优化基础是什么样了.如果旧网站曾经被K过,或者优化的程度不高.这个时候就不如采用新的域 名了,同时新的域名要做好关键词布局.做好站内文章优化,而不是一味追求所谓的

你变了,一切就都变了

受得了多大的委屈,做得了多大的事:受得了多大诋毁,就能承的住多大赞美:耐得住寂寞,才能守得住繁华. 为什么一个老板再难,也不会轻言放弃,而一个员工做得不顺就想逃走:为什么一对夫妻再大的矛盾,也不会轻易离婚,而一对情侣常为一些很小的事就分开了?说到底,你在一件事,一段关系上的投入多少,决定你能承受多大的压力,能取得多大的成功,能坚守多长时间. 伟大都是熬出来的 冯仑说,伟大都是熬出来的.为什么用熬?因为普通人承受不了的委屈你得承受,普通人需要别人理解安慰鼓励,但你没有:普通人用对抗消极指责来发泄情

ie6 png 透明的解决方法,大网站都在用

ie6 png 透明的解决方法,大网站都在用 作者: 来源: [大 中 小] 浏览:37122 添加日期:2012-11-30 我要评论(体感音乐)      今天解决png图片在IE6下的背景透明问题,找到了一个好方法.之前的解决方案会造成错位,使页面变形.现把这个方法公布如下,本人亲测可以正常使用,如果你在使用中出现问题,(体感音乐)请看实例中的说明(英文不精的童鞋可以用谷歌翻译哟) <!--[if lt IE 7]> <script type="text/javascri

回收站勾选变灰了无法选择 桌面回收站不见了 解决办法

有一天你突然发现桌面回收站图标不见了,于是想到 桌面>>右键>>个性化>>更改桌面图标>>勾选“回收站”>>确定,OK! 但郁闷的是,打开“更改桌面图标”后发现: 回收站勾选变灰了,无法选择.这不是坑爹吗 解决办法如下: 运行里输入“gpedit.msg"(打开本地组策略编辑器) 依次打开:用户配置>>管理模板>>桌面>>从右边选择“从桌面上删除回收站”(双击) 如下图: 打开后发现选择的是“已启用”

关于网站全体变灰

平时到哀悼日的时候,我们看到很多知名网站都变成灰色了,在网上查了下代码,分享给大家 只需要加下面的样式即可 html { filter: url(“data:image/svg+xml;utf8,<svg xmlns=\’http://www.w3.org/2000/svg\’><filter id=\’grayscale\’><feColorMatrix type=\’matrix\’ values=\’0.3333 0.3333 0.3333 0 0 0.3333 0.3