清明节网站变灰是如何实现的
为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼,国务院今天发布公告,决定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:转换值的大小,可以是
number
或percentage
。 当值为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
冬将尽,春可期,山河无恙,人间皆安
清明节网站变灰是如何实现的相关推荐
- 如何使用css实现网站变灰效果
目录 示例 代码分析 grayscale saturate 总结 参考 为了悼念新冠病毒牺牲的烈士,很多网站都在清明节那天把网站设置成了灰色. 示例 我选择了几个网站,先来看看它们是如何实现网站变灰效 ...
- 4月4日网站变灰实录
4月4日网站变灰记录 基本都是通过 grayscale 来实现的 都不支持 IE 11 但在 IE 11 的情况下表现却各不相同 B站.A站.淘宝.京东.百度.虎扑.开源中国 B 站 html.gra ...
- 网站变灰,寄托哀思,让我们共同行动!( 图片、文字、Flash变灰)
网站变灰,寄托哀思,让我们共同行动! 在全局CSS定义中加入以下代码,可使除FLASH外的元素变灰 body { filter:progid:DXImageTransform.Microsoft.Ba ...
- 网站变灰CSS,多浏览器兼容版本
网站变灰CSS,多浏览器兼容版本: <style> body *{ -webkit-filter: grayscale(100%); /* webkit */ -moz-filter: g ...
- 一行css代码让整个网站变灰, 通过js控制定点触发和关闭
今天是5.12是个特殊的日子,有的时候吧 会把整个网站变灰的需求 这个我们用css过滤器 一行代码就能实现了 filter: grayscale(100%); 问题是 出在定点触发 这块,我们可以通过 ...
- “网站变灰”的代码实现
网站变灰 为了表示哀悼,当天很多网站把主页和内容都变成了灰色,比如百度.B 站.爱奇艺.CSDN 等等. CSDN&&爱奇艺&&百度等 实现: html.gray {- ...
- 网站变灰小妙招-几行代码搞定
网站变灰不需要重写样式,几行代码搞定: html{-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grays ...
- 【2020.04.04缅怀英烈,哀悼英雄】哀悼日网站变灰代码
哀悼日网站变灰代码.昨晚加班把公司的多有网站全变设置完成,缅怀英烈,哀悼英雄.记住你们,因为你们我们变得安全,谢谢你们. 在全站的CSS中写入以下代码: html { filter:progid:DX ...
- 网站变灰代码,一行代码让网站整体变灰,wordpress网站一行代码全站变灰教程
在遇到特殊情况的时候,我们作为站长需要紧急将网站变灰的需求,在此小编给大家总结了几种方法,通过简单修改一下站点样式即可实现.一段代码让网站整体变灰.这里主要介绍的利用 filter: grayscal ...
最新文章
- Map-Reduce编程模型gif图片解释
- 检索com类工厂 80070005_Hands-On Design Patterns With C++(十二)友元工厂
- CentOs6.5下安装vim7.4
- ifconfig,netstat 命令找不到解決办法
- java ftp下载文件 慢_java实现ftp文件上传下载,解决慢,中文乱码,多个文件下载等问题...
- 大唐发电厂计算机考试题,全国计算机等级考试上机考试与题库解析:一级B
- JavaScript算法(实例七)空瓶子换汽水问题
- matlab csapi代码,【matlab】樣條函數:csapi、spap2和augknt的使用
- Win2008 R2 VDI动手实验系列之二:远程桌面虚拟化主机配置
- Ceph 撸源码系列(一):Ceph开源项目源代码的关键目录介绍
- java swing 组件渲染过程,swing组件介绍
- mac被限制什么意思_苹果ip完美解决电脑ip被限制问题
- 【RT-Thread 开源作品秀】时光空间立方
- 阿里巴巴入选的JCP最高执行委员会,何方神圣?
- 遇到的面试题基础知识
- xshell6使用技巧_Xshell 6怎么设置为中文-Xshell 6设置为中文的方法 - 河东软件园
- 06_04_SSM拉勾教育后台管理系统(权限模块\登录及动态菜单)
- 打印机共享后每天要重新连接
- PS完美支持M1芯片mac(Adobe photoshop2019直装版M1安装方法)适用M1芯片处理器 (此版本已解决在M1电脑上出现“液化”滤镜和WEB等黑屏问题)
- 操作系统-PV操作-独木桥问题
热门文章
- 椭圆曲线图像加密 matlab,椭圆曲线ECC加密算法入门介绍(三、四)
- 晚上几点睡觉算熬夜?没有睡够,“白天补觉”有效果?终于知道了
- 【科创人】瑞云创始人汪忠田:售后服务SaaS市场拓荒者
- 18天精读掌握《费曼物理学讲义卷一》 第1天 2019/6.12
- 【黑猩猩算法】基于加权反对技术和贪婪搜索进化黑猩猩优化算法求解多模态工程问题附matlab代码
- Home Assistant入门1-1:在树莓派上安装官方系统
- 初中计算机考试的题型,教师资格证考试中学信息技术科目题型及分值分布,快看!...
- vmware创建共享文件夹
- ShowMeAI —— Show u 三连
- arduino控制寻迹传感器