哀悼日很多网站都变成了灰色，这是怎么做到的?
liebian365 2024-11-18 14:17 2 浏览 0 评论
哀悼日打开各个网站，发现网页都变成灰色了。今年国家经历了非常惨痛的时刻，有很多烈士英雄保卫人民的安危遇难，昨天全国下降半旗，北京时间 10 点全国默哀三分钟，来致敬英雄们。为了深切哀悼在抗击新冠肺炎斗争中的牺牲烈士和逝世同胞，4月4日0点起，全国多家网站和移动端，比如百度、优酷、爱奇艺、哔哩哔哩、抖音、快手、斗鱼和CSDN等平台给出公告称：2020年4月4日全国性哀悼活动期间，停止今天一切公共娱乐活动。
随便打开这些任何一个网站，全站的内容都变成了灰色，包括按钮、图片等等。相信这时候从事程序开发的粉丝可能会好奇这是怎么做到的呢？
其实解决方案很简单，只需要几行代码就能搞定了。从事前端开发的朋友会以为所有的内容都统一换了一个 CSS 样式，图片也全换成灰色的了，按钮等样式也统一换成了灰色样式。如下图，有一个灰色样式：[filter: grayscale(100%);]，也许就是这一个样式控制着整个网页显示效果。
现在试着关掉这个样式，会发现整个csdn页面恢复了往常的红色主题，包括网站logo、图片和按钮都恢复了。
总结上面的实验效果，果然是这个样式在起作用，而且是全局的效果，因为它是作用在了 html 这个节点之上的。只要修改这部分CSS代码：
当然这种修改CSS的方式还有很多，我们可以在Mozilla发布的样式效果测试平台上看看 filter 这种不同层叠样式效果。
平台地址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
通过这几个用力可见通过 filter 样式改变了图片、颜色、模糊、对比度等等信息。官网介绍了一些语法：
设置一种函数，方法如下：
如果对层叠样式感兴趣的朋友可以阅览下官网的说明文档：
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter
除了这些开发样式调整的方法以外，还可以走系统架构角度解决网页的显示问题，通常很多大型网站都用上了反向代理nginx服务器，所有网站访问，都要通过nginx代理去访问到网页内容。
既然这样，统一在nginx服务器上做一些配置也是可行的，之前某大神的博客说“在Nginx负载均衡服务器上，利用sub_filter指令在输出的HTML中增加一行如下代码：
<style type="text/css">html {filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }style>
nginx配置修改效果如下：
小编到这里就简单介绍了一下哀悼日观察到的网站变灰的实现，也学习了 filter 的更详细的用法，希望能给有相同兴趣的粉丝带来一些帮助。
关注优逸客微信公众号（sx-uek）预约优逸客免费学习名额，在互联网行业找到适合自己学习的技术方向，实现高薪就业！
相关推荐
- 快递查询教程，批量查询物流，一键管理快递
-
作为商家，每天需要查询许许多多的快递单号，面对不同的快递公司，有没有简单一点的物流查询方法呢？小编的回答当然是有的，下面随小编一起来试试这个新技巧。需要哪些工具？安装一个快递批量查询高手快递单号怎么快...
- 一键自动查询所有快递的物流信息 支持圆通、韵达等多家快递
-
对于各位商家来说拥有一个好的快递软件，能够有效的提高自己的工作效率，在管理快递单号的时候都需要对单号进行表格整理，那怎么样能够快速的查询所有单号信息，并自动生成表格呢？1、其实方法很简单，我们不需要一...
- 快递查询单号查询，怎么查物流到哪了
-
输入单号怎么查快递到哪里去了呢？今天小编给大家分享一个新的技巧，它支持多家快递，一次能查询多个单号物流，还可对查询到的物流进行分析、筛选以及导出，下面一起来试试。需要哪些工具?安装一个快递批量查询高手...
- 3分钟查询物流，教你一键批量查询全部物流信息
-
很多朋友在问，如何在短时间内把单号的物流信息查询出来，查询完成后筛选已签收件、筛选未签收件，今天小编就分享一款物流查询神器，感兴趣的朋友接着往下看。第一步，运行【快递批量查询高手】在主界面中点击【添...
- 快递单号查询，一次性查询全部物流信息
-
现在各种快递的查询方式，各有各的好，各有各的劣，总的来说，还是有比较方便的。今天小编就给大家分享一个新的技巧，支持多家快递，一次能查询多个单号的物流，还能对查询到的物流进行分析、筛选以及导出，下面一起...
- 快递查询工具，批量查询多个快递快递单号的物流状态、签收时间
-
最近有朋友在问，怎么快速查询单号的物流信息呢？除了官网，还有没有更简单的方法呢？小编的回答当然是有的，下面一起来看看。需要哪些工具？安装一个快递批量查询高手多个京东的快递单号怎么快速查询？进入快递批量...
- 快递查询软件，自动识别查询快递单号查询方法
-
当你拥有多个快递单号的时候，该如何快速查询物流信息？比如单号没有快递公司时，又该如何自动识别再去查询呢？不知道如何操作的宝贝们，下面随小编一起来试试。需要哪些工具？安装一个快递批量查询高手快递单号若干...
- 教你怎样查询快递查询单号并保存物流信息
-
商家发货，快递揽收后，一般会直接手动复制到官网上一个个查询物流，那么久而久之，就会觉得查询变得特别繁琐，今天小编给大家分享一个新的技巧，下面一起来试试。教程之前，我们来预览一下用快递批量查询高手...
- 简单几步骤查询所有快递物流信息
-
在高峰期订单量大的时候，可能需要一双手当十双手去查询快递物流，但是由于逐一去查询，效率极低，追踪困难。那么今天小编给大家分享一个新的技巧，一次能查询多个快递单号的物流，下面一起来学习一下，希望能给大家...
- 物流单号查询，如何查询快递信息，按最后更新时间搜索需要的单号
-
最近有很多朋友在问，如何通过快递单号查询物流信息，并按最后更新时间搜索出需要的单号呢？下面随小编一起来试试吧。需要哪些工具？安装一个快递批量查询高手快递单号若干怎么快速查询？运行【快递批量查询高手】...
- 连续保存新单号功能解析，导入单号查询并自动识别批量查快递信息
-
快递查询已经成为我们日常生活中不可或缺的一部分。然而，面对海量的快递单号，如何高效、准确地查询每一个快递的物流信息，成为了许多人头疼的问题。幸运的是，随着科技的进步，一款名为“快递批量查询高手”的软件...
- 快递查询教程，快递单号查询，筛选更新量为1的单号
-
最近有很多朋友在问，怎么快速查询快递单号的物流，并筛选出更新量为1的单号呢？今天小编给大家分享一个新方法，一起来试试吧。需要哪些工具？安装一个快递批量查询高手多个快递单号怎么快速查询？运行【快递批量查...
- 掌握批量查询快递动态的技巧，一键查找无信息记录的两种方法解析
-
在快节奏的商业环境中，高效的物流查询是确保业务顺畅运行的关键。作为快递查询达人，我深知时间的宝贵，因此，今天我将向大家介绍一款强大的工具——快递批量查询高手软件。这款软件能够帮助你批量查询快递动态，一...
- 从复杂到简单的单号查询，一键清除单号中的符号并批量查快递信息
-
在繁忙的商务与日常生活中，快递查询已成为不可或缺的一环。然而，面对海量的单号，逐一查询不仅耗时费力，还容易出错。现在，有了快递批量查询高手软件，一切变得简单明了。只需一键，即可搞定单号查询，一键处理单...
- 物流单号查询，在哪里查询快递
-
如果在快递单号多的情况，你还在一个个复制粘贴到官网上手动查询，是一件非常麻烦的事情。于是乎今天小编给大家分享一个新的技巧，下面一起来试试。需要哪些工具？安装一个快递批量查询高手快递单号怎么快速查询？...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- wireshark怎么抓包 (75)
- qt sleep (64)
- cs1.6指令代码大全 (55)
- factory-method (60)
- sqlite3_bind_blob (52)
- hibernate update (63)
- c++ base64 (70)
- nc 命令 (52)
- wm_close (51)
- epollin (51)
- sqlca.sqlcode (57)
- lua ipairs (60)
- tv_usec (64)
- 命令行进入文件夹 (53)
- postgresql array (57)
- statfs函数 (57)
- .project文件 (54)
- lua require (56)
- for_each (67)
- c#工厂模式 (57)
- wxsqlite3 (66)
- dmesg -c (58)
- fopen参数 (53)
- tar -zxvf -c (55)
- 速递查询 (52)