昨天很多网站都变成了灰色,这是怎么做到的?

作者:孙宇晨 来源:www.5idf.cn 2020-04-05   阅读:

昨天打开各个网站,发现网页都变成灰色了。今年国家经历了非常惨痛的时刻,有很多烈士英雄保卫人民的安危遇难,昨天全国下降半旗,北京时间 10 点全国默哀三分钟,来致敬英雄们。为了深切哀悼在抗击新冠肺炎斗争中的牺牲烈士和逝世同胞,4月4日0点起,全国多家网站和移动端,比如百度、优酷、爱奇艺、哔哩哔哩、抖音、快手、斗鱼和CSDN等平台给出公告称:2020年4月4日全国性哀悼活动期间,停止今天一切公共娱乐活动。

来自youku
随便打开这些任何一个网站,全站的内容都变成了灰色,包括按钮、图片等等。相信这时候从事程序开发的粉丝可能会好奇这是怎么做到的呢?
来自csdn
其实解决方案很简单,只需要几行代码就能搞定了。从事前端开发的朋友会以为所有的内容都统一换了一个 CSS 样式,图片也全换成灰色的了,按钮等样式也统一换成了灰色样式。如下图,有一个灰色样式:[filter: grayscale(100%);],也许就是这一个样式控制着整个网页显示效果。
 

来自csdn
现在试着关掉这个样式,会发现整个csdn页面恢复了往常的红色主题,包括网站logo、图片和按钮都恢复了。
 
来自csdn
总结上面的实验效果,果然是这个样式在起作用,而且是全局的效果,因为它是作用在了 html 这个节点之上的。只要修改这部分CSS代码:
  •  
html {  webkit-filter: grayscale(100%);  filter: grayscale(100%);}
当然这种修改CSS的方式还有很多,我们可以在Mozilla发布的样式效果测试平台上看看 filter 这种不同层叠样式效果。
平台地址:https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
 
来自于developer.mozilla
通过这几个用力可见通过 filter 样式改变了图片、颜色、模糊、对比度等等信息。官网介绍了一些语法:
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
/* 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;
设置一种函数,方法如下:
  •  

	
filter: <filter-function> [<filter-function>]* | none
如果对层叠样式感兴趣的朋友可以阅览下官网的说明文档:
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter
 
除了这些开发样式调整的方法以外,还可以走系统架构角度解决网页的显示问题,通常很多大型网站都用上了反向代理nginx服务器,所有网站访问,都要通过nginx代理去访问到网页内容。

来自baidu
既然这样,统一在nginx服务器上做一些配置也是可行的,之前某大神的博客说“在Nginx负载均衡服务器上,利用sub_filter指令在输出的HTML中增加一行如下代码:
  •  
<style type="text/css">html {filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }</style>
nginx配置修改效果如下:

来自csdn
小编到这里就简单介绍了一下昨天观察到的网站变灰的实现,也学习了 filter 的更详细的用法,希望能给有相同兴趣的粉丝带来一些帮助。
分享给小伙伴们:
如果本文侵犯了您的权利, 请联系本网立即做出处理,谢谢。
相关文章
  • 网络世界的九一法则(网络与帕累托法则)

    网络世界的九一法则(网络与帕累托法则)

  • 浏览色情网站时有哪些眼睛在盯着你

    浏览色情网站时有哪些眼睛在盯着你

  • 新手必知网站流量来源的8种渠道

    新手必知网站流量来源的8种渠道

  • 选好利基市场,让网站找到获利模式

    选好利基市场,让网站找到获利模式