必备技能11:网页一键变灰

简介: 必备技能11:网页一键变灰

1 缘起


为了悼念新型冠状病毒疫情罹难的同胞,清明节举行了全国哀悼活动,当你浏览各大网页的时候,会发现该他们的网页界面都清一色的变成了灰色,这是怎么实现的呢?

其实很简单,稍微琢磨以下,就一行代码即可满足的你的好奇心,并为您答疑解惑,不说废话先摆上这个行神奇的代码:

-webkit-filter: grayscale(100%);

2 演示

那么如何实现呢?现在就给大家演示一下:

我们以CSDN为例,效果是这样:

image.gif


再看一个示例:


20200405103217400.jpg

3 原理解析

CSS3 filter(滤镜)grayscale(%):

属性将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0;


因此:修改所有图片的颜色为黑白 (100% 灰度): -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%);  

4 拓展

为了兼容不同浏览器,你还可多写几行代码:

html {
-webkit-filter: grayscale(100%);
/* webkit */
-moz-filter: grayscale(100%);
/*firefox*/
-ms-filter: grayscale(100%);
/*ie9*/
-o-filter: grayscale(100%);
/*opera*/
filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
filter: gray;
/*ie9- */
}
相关文章
JDK序列化原理问题之在JDK序列化中不同JDK版本字段不一致的情况如何解决
JDK序列化原理问题之在JDK序列化中不同JDK版本字段不一致的情况如何解决
174 0
|
10月前
|
人工智能 大数据 云计算
【AI系统】AI 发展驱动力
本文介绍了阿里云在2023年云栖大会上发布的多项新技术和产品,涵盖云计算、大数据、人工智能等领域,展示了阿里云最新的技术成果和行业解决方案,助力企业数字化转型。
|
10月前
|
Java
如何捕获和处理 EOFException 异常
EOFException 异常通常在尝试从输入流中读取数据但已到达文件末尾时抛出。要捕获和处理该异常,可以使用 try-catch 语句块,在 catch 块中进行相应的错误处理或提示。例如: ```java try { // 读取数据的代码 } catch (EOFException e) { System.out.println("已到达文件末尾"); } ```
495 4
|
12月前
|
缓存 Java 测试技术
谷粒商城笔记+踩坑(11)——性能压测和调优,JMeter压力测试+jvisualvm监控性能+资源动静分离+修改堆内存
使用JMeter对项目各个接口进行压力测试,并对前端进行动静分离优化,优化三级分类查询接口的性能
404 10
谷粒商城笔记+踩坑(11)——性能压测和调优,JMeter压力测试+jvisualvm监控性能+资源动静分离+修改堆内存
|
11月前
|
运维 监控 API
深入了解微服务架构:优势与挑战
【10月更文挑战第7天】深入了解微服务架构:优势与挑战
|
NoSQL MongoDB 数据库
国内唯一 阿里云荣膺MongoDB“2024年度DBaaS认证合作伙伴奖”
阿里云连续第五年斩获MongoDB合作伙伴奖项,也是唯一获此殊荣的中国云厂商。一起学习MongoDB副本集的选举机制以及可能会出现的特殊情况。
国内唯一 阿里云荣膺MongoDB“2024年度DBaaS认证合作伙伴奖”
|
小程序 安全
微信小程序自定义底部导航栏
微信小程序自定义底部导航栏
|
消息中间件 存储 Java
深度探索:使用Apache Kafka构建高效Java消息队列处理系统
【4月更文挑战第17天】本文介绍了在Java环境下使用Apache Kafka进行消息队列处理的方法。Kafka是一个分布式流处理平台,采用发布/订阅模型,支持高效的消息生产和消费。文章详细讲解了Kafka的核心概念,包括主题、生产者和消费者,以及消息的存储和消费流程。此外,还展示了Java代码示例,说明如何创建生产者和消费者。最后,讨论了在高并发场景下的优化策略,如分区、消息压缩和批处理。通过理解和应用这些策略,可以构建高性能的消息系统。
172 1
|
开发框架 缓存 Java
Spring AOP用法详解
Spring AOP用法详解
342 0
|
XML 缓存 监控
Android 性能优化(一): 启动优化理论与实践
本文章总结了目前市面上常见的一些启动优化常用手段,**开发和面试必备哦**