专栏首页Super 前端清明节网站变灰是如何实现的

清明节网站变灰是如何实现的

为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼,国务院今天发布公告,决定2020年4月4日举行全国性哀悼活动。在此期间,全国和驻外使领馆下半旗志哀,全国停止公共娱乐活动。4月4日10时起,全国人民默哀3分钟,汽车、火车、舰船鸣笛,防空警报鸣响。

各大网站响应国家号召,将页面色调变为了灰色。作为一个技术仔,特别是前端技术仔必须一探究竟。

取证

图片本身依然是彩色,但呈现是灰色,可判断为渲染导致的。通过审查元素,在当前元素上并没有发现特别的设置;于是一层层向上查找,最终在 html 上发现了 filter

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);
}

结论

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

CSS标准里包含了一些已实现预定义效果的函数。具体细则大家可查阅 mdn。

其中,grayscale(amount) 对图片进行灰度转换, 它是 filter-function 的子属性.

  • amount:转换值的大小,可以是numberpercentage。 当值为100%时, 灰度最大。 0%时与原图没有区别。 0% 到 100% 之间的值会使灰度线性变化。amount 为空时会自动插入0。
<img style="filter: grayscale(0)" src="./super前端.png">
<img style="filter: grayscale(0.5)" src="./super前端.png">
<img style="filter: grayscale(1)" src="./super前端.png">

百度、头条等网站均采用上述方式!

兼容性

相关地址

  • https://ligang.blog.csdn.net/
  • https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
  • https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter-function/grayscale

冬将尽,春可期,山河无恙,人间皆安

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 分布式版本控制-Git(二)

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    奋飛
  • Git常用命令

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    奋飛
  • Git Pro深入浅出(三)

    前面已经阐述了Git基本的运作机制和使用方式,介绍了许多Git提供的工具来帮助你简单且有效地使用它。本部分将演示如何借助Git的一些重要的配置方法和钩子机制,来...

    奋飛
  • 让网站变成灰色

    一般在清明节,全国哀悼日,大地震的日子,以及一些影响力很大的伟人逝世或纪念日的时候,身为站长的我们都会让自己的网站的全部网页变成灰色(黑白色),以表示我们对逝者...

    周俊辉
  • springmvc使用DELETE|PUT请求

    乐心湖
  • 「特殊节日使用」全站增加灰色滤镜通用代码

    今年12月13日是第五个南京大屠杀死难者国家公祭日,每年的这一天,我们以国家之名祭奠,共同铭记历史

    沈唁
  • css3 greyscale实现去色 c

    py3study
  • css实现全站黑白,愿逝者安息。

    卜露
  • 探究网站变灰色那点事

    缅怀的同时,突然冒出一个问题,怎么做到的?难不成一个个调整图片,调整对应的控件色值?

    HLQ_Struggle
  • 网页|如何实现网页变灰效果

    2020年4月4日,星期六农历三月十二清明节。在以往的这一天或许并没有太多的特别之处。但今年我国正经历着一场浩劫,新冠肺炎席卷武汉和湖北地区,无数的白衣天使冲向...

    算法与编程之美

扫码关注云+社区

领取腾讯云代金券