一文读懂如何让网页变灰白色(黑白色)

已于 2022-12-07 13:40:29 修改
阅读量1.5k 收藏 8
点赞数 1
分类专栏： 前端开发技术解决方法 文章标签： css 前端 后端 html typescript
于 2022-12-07 13:32:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lvoelife/article/details/128217590
版权
本文介绍了在特殊时期将网页变为灰白色以示哀悼的方法，包括修改CSS文件、设置html和body标签的内联样式，以及使用grayscale.js插件。详细讲述了各种实现方式的代码示例。
摘要由CSDN通过智能技术生成

文章目录

1. 文章引言

有段时间，我们打开知名的网页，发现全部变成黑白色了，如下图所示：

在这里插入图片描述

在这里插入图片描述

一般在清明节，全国哀悼日，大地震的日子，以及一些影响力很大的伟人逝世或纪念日的时候，身为站长的我们都会让自己的网站的全部网页变成灰色（黑白色），以表示我们对逝者的悼念。那么今天就说说，通过几行简单的代码，来实现这个功能。

首先，我需要创建test.html文件(网页)，如下代码所示：

<!DOCTYPE html
了解本专栏 订阅专栏 解锁全文
互联网全栈开发实战
关注
专栏目录
订阅专栏
一文读懂移动通信原理和移动通信系统发展历史-综合文档
05-22
一文读懂移动通信原理和移动通信系统发展历史
网站变黑白JS
04-26
网站变黑白JS,遇到大难，虽把网页变黑白色，此JS可实现。
把网站变成黑白色
神zhi殇的博客
04-10 2086
简单几句CSS代码，就可以把网站变成黑白色： html { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%); } 使用的是CSS滤镜，将网页中的色彩部分过滤掉。 ...
如何把网页变成黑白
weixin_33997389的博客
08-14 290
body{-webkit-filter: grayscale(100%);} 转载于:https://blog.51cto.com/854636/1684524
【每日小技巧】 如何把网页迅速变成黑白色？
qq_69223185的博客
03-04 685
如何迅速将彩色网页变为灰白色？只需要一行代码即可搞定！！
网页黑白色
静艺的专栏
04-22 763
html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter:grayscale(1);}
一文读懂，什么是仓颉编程语言？
最新发布
06-23
仓颉编程语言：一文读懂，什么是仓颉编程语言？ 仓颉编程语言：一文读懂，什么是仓颉编程语言？ 仓颉编程语言：一文读懂，什么是仓颉编程语言？ 仓颉编程语言：一文读懂，什么是仓颉编程语言？ 仓颉编程语言：一文读...
一文读懂CCD图像传感器的帧频-综合文档
05-22
一文读懂CCD图像传感器的帧频
一文读懂工业互联网标识解析体系.docx
09-20
一文读懂工业互联网标识解析体系.docx
网站网页快速变黑白方法
hongweigg的专栏
06-11 8617
网页变黑白常用于表达悼念、怀念故去的著名人物、重大灾难事件等。通过分析，百度百科人物网页变黑白是这么做的：webkit-filter: grayscale(1);其中grayscale（）的取值为0%-100%，也可以用0-1取代，0%代表彩色图像，100%代表完全的灰度。 css filter的浏览器兼容：Chrome31+，Safari7+，Opera20+，ios Safari6+,Android Browser4.4+, Blackberry 10+均支持了-webkit-filter的方式，IE
网页变黑白…
weixin_34248118的博客
04-21 131
全国哀悼日 要停止一切娱乐活动 同时老板指示为了表示哀悼 网页要改成黑白的   翻翻以前512的时候的黑白CSS，套上就能用了 其实就是在网页上加层滤镜 在这分享下吧： CSS里加：html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } 或者：html { FILTER: gray }...
如何让你的网站变黑白？
qq_29887971的博客
12-03 1031
CSS 指层叠样式表 (Cascading Style Sheets)，它定义了如何将HTML元素进行显示。因此我们可以在自己的网站中添加如下CSS代码，就可以实现网页变灰的操作。如果你不想去修改整个网站，或者你的网页比较少的情况下，可以通过内联样式，即在头部标签里面加入内联CSS代码，也同样可以实现网页变灰的操作。 当然，你也可以通过修改标签的方法改变网站的颜色。方法四：修改body 方法虽多，但究其根本还是通过修改CSS的滤镜来控制网页显示的颜色状态的做法，只是各自的调用方式不同
把网站服务器调黑白,网站快速变黑白灰色的4种方法
热门推荐
weixin_39887926的博客
08-05 1万+
一般在清明节，全国哀悼日，大地震的日子，以及一些影响力很大的伟人逝世或纪念日的时候，身为站长的我们都会让自己的网站的全部网页变成灰色(黑白色)，以表示我们对逝者的悼念。那么天下数据小编就说说，通过几行简单的代码，来实现这个功能。第一种：修改CSS文件我们可以在网页的CSS文件中添加以下的CSS代码，来实现网页黑白色，也就是网站变灰CSS代码html {filter: progid:DXImageT...
网站变为黑白
刘晓春
06-29 2262
项目接近尾声了，前几天在测试的时候发现，在某个win7电脑的IE上，网站竟然变成了黑白的。我的电脑是win8的系统，用IE测，更改各种文档模式均正常，令人费解。     找不到原因，更改浏览器的各种设置，均没有效果。     上网搜资料的时候发现，很多网站为了纪念大地震或者其他日子的时候会故意把网站网站变成黑白的。没有平白无故变成的黑白的。     此时应该想到，看看怎么设置黑白，看看我的是
利用css让整个网站变黑白色 ，图片也是黑白色
qq_35761056的博客
12-02 221
CSS的 filter: grayscale(100%);属性即可实现灰度效果 ，元素设置 filter: grayscale(100%) 属性整个元素里的内容全部显示黑白颜色，包含图片内容。之前也没做过这样的内容，第一感觉就是图片要重新设计黑白色，布局颜色都要修改。但看到好多网站瞬间变黑白色，感觉一定有更好的解决方法。后面才找到filter属性解决了。今天接到一个需求，老板要求小程序首页变成黑白色。
网页变黑白
ahshow的专栏
05-25 647
哀悼5.12四川汶川大地震html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } 使用方法：这段代码可以变网页为黑白，将代码加到CSS最顶端就可以实现素装。 有一些站长的网站可能使用这个css 不能生效，是因为网站没有使用最新的网页标准协议  http://www.w3.org/TR/xhtml1
神奇的滤镜
SImonJ07的记事本
05-20 634
  HTML {...}{ FILTER: progid:DXImageTransform.Microsoft.BasicImage (grayscale=1)} 
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

互联网全栈开发实战

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值