一行CSS代码实现网页变灰

最新推荐文章于 2023-06-11 10:01:41 发布
原创 最新推荐文章于 2023-06-11 10:01:41 发布 · 1k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文回顾了2020年4月4日全国哀悼日，众多网站如百度、淘宝和京东将首页变为灰色以示哀悼的情景。文章介绍了一种使用CSS的grayscale()函数实现网页快速变灰的方法，只需一行代码即可完成。通过链接到MDN的grayscale()函数页面，读者可以详细了解该CSS属性的具体用法。

文章目录

背景

2020年4月4日 星期六 全国哀悼
在这里插入图片描述
于此同时，很多网站的首页都变成了灰色，例如常见的
百度：
在这里插入图片描述
淘宝：
在这里插入图片描述
京东：
在这里插入图片描述

CSS

如果不考虑兼容性等问题，只要一行 CSS 代码即可实现网页变灰：

filter: grayscale(1);

打开 MDN 查看 grayscale() 的用法：
在这里插入图片描述

参考资料

MDN grayscale()

最后

在这里插入图片描述

如何把我们的网站变成黑白色或是灰色
01-20
第一种：修改CSS文件 我们可以在网页的CSS文件中添加以下的CSS代码，来实现网页黑白色，也就是网站变灰.(如果是小白站长们，可以把这段代码和到百度统计放在一起，放之前一定要记得换行隔开） CSS代码 html {     filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);     -webkit-filter: grayscale(100%); } 第二种：在网页的标签内加入以下代码 如果你不想改动CSS文件，你可以通过在网页头部中的标签内部加入内联CSS代码的形式实现网站网页变灰。放到标签与底部即可。 代
网站都变成灰色，几行代码搞定！
Talk is cheap, show me the code
12-05 789
当大家看到全站的内容都变成了灰色，包括按钮、图片等等。这时候我们可能会好奇这是怎么做到的呢？ 有人会以为所有的内容都统一换了一个 CSS 样式，图片也全换成灰色的了，按钮等样式也统一换成了灰色样式。但你想想这个成本也太高了，而且万一某个控件忘记加灰色样式了岂不是太突兀了。其实，解决方案很简单，只需要几行代码就能搞定了。通过参考资料，我总结出以下几个方法可以帮助我们达到目的：使这个网页的颜色变成灰色的最简单的方法，就是在当前页面的css里面。添加下面的代码，并且让他在任意的浏览器里面正确的执行： filt
css一行代码网页置灰
weixin_49609457的博客
03-16 1786
css一行代码网页置灰
CSS网页变灰色代码方法分享
winkexin的博客
06-11 1929
发生重大哀悼事件时候，很多网站都将网站变灰色以示哀悼。在此我给大家总结了两种CSS网页变灰色代码方法，分享给大家。
玩转代码|三种方法让你的网站变灰代码
Jum的博客
12-03 1007
在全站的CSS中写入以下代码： 1、全站变灰建议写入.css文件然后引入文件。 2、单页面变灰直接写入css样式。在HTML代码和 之间插入即可。 3、我们也可以F12看一些其它网站如何设置 这样就会全站变灰了。大家快去试试吧。
图片变灰
weixin_30391339的博客
04-10 488
img{ filter:grayscale(100%); -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms-filter:grayscale(100%); -o-filter:grayscale(100%); filter:url("data:image/svg+xml;utf8,<svg xmlns=\'htt...
一行代码带你实现网页变灰效果
qq_42680327的博客
04-06 549
​2020年4月4日，星期六，清明节。 我们的国家经历了非常惨痛的时刻，很多英雄在救助他人的路上倒下，更有很多烈士英雄保卫人民的安危遇难，今天全国下降半旗，北京时间 10 点全国默哀三分钟，来致敬英雄们。同时今天一切公共娱乐活动也都会停止，包括直播、综艺、影视、游戏等等。 我也在这里也向全国抗击新冠肺炎疫情斗争牺牲的烈士和逝世的同胞表达深切的哀悼，向所有在抗战在疫情前线的工作和医护人员致敬。我...
老板：你也把咱们网站弄成灰色——网站变灰色如何实现
斌擎科技
12-03 961
从昨天下午开始，我们打开各种网站后都是灰色的，我们讲解一下如何用技术手段使网页变灰色。//分析：我们网站的元素大多数都是img标签和其他文字行标签，文字我们直接使用color:#ccc就可以更改，图片不可能每张都更换成灰色背景，那非常不现实，一张一张改起来是多大的工程。所以一定是使用类似蒙层，滤镜的东西把原本的色彩遮罩。其实只需要一行代码就可以使网页变灰，我们利用css属性中的过滤器filter就可以实现 grayscale是将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0
让整个网站网页变灰的方法
东北狼仙
06-18 1万+
一般在清明节，全国哀悼日，大地震的日子，以及一些影响力很大的伟人逝世或纪念日的时候，身为站长的我们都会让自己的网站的全部网页变成灰色（黑白色），以表示我们对逝者的悼念。那么今天就说说，通过几行简单的代码，来实现这个功能。 第一种：修改CSS文件 我们可以在网页的CSS文件中添加以下的CSS代码，来实现网页黑白色，也就是网站变灰 CSS代码 html { filter: progi...
如何让网页变灰
热门推荐
qq_55451220的博客
09-15 2万+
让网页变灰的三种方法
网站如何快速变成灰色？，几行代码就搞定了！
weixin_42415158的博客
12-03 5876
网站如何快速变成灰色？，几行代码就搞定了！
一行 CSS 代码实现整个网站网页变黑白灰的效果
weixin_52767262的博客
04-07 5984
背景 在全国哀悼日（吊念地震、疫情等），如果你也是站长，想做点什么，那么可以把网站编程黑白以示哀悼。下面分享一行代码实现整个网站网页编程黑白灰色的效果，主要是通过修改 CSS 的方式实现的（如果想要全站去彩色、最好放到基础公共的css文件中全局引用） 实现网站黑白灰效果的代码 以下代码其实合并在一行就可以，所以标题的一行代码并没有什么问题。但是下面代码分成多行，为了方便大家阅读和理解 <style> html { -webkit-filter: grayscale(
网页变灰色代码
zcy1005的博客
04-01 1580
html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
CSS - 让整个页面变成灰色（一行代码）
🏆 前端领域优质创作者
05-17 1万+
前言 现在很多大厂产品，遇到清明节、南京大屠杀纪念日等节日，网站或软件就会变为灰色。 在咱们小程序或网站中，实现起来非常简单， 从各种鲜亮的颜色，一行代码变为如下图所示灰色： 解决方案 通过 filter: grayscale(100%) 滤镜属性，了解更多请 点击这里。 以下是使用的示例，您可按照方法应用到您的项目中。 <!DOCTYPE html> <html lang="zh"> <head> <style> /* 整个页面变灰 */ body
css hover变成手_让网页变成灰色？一行代码就够了！
weixin_30865253的博客
12-28 312
2020年4月4日是一个特殊的日子。这天是传统的清明节，也是国家规定对冠肺炎疫情斗争中牺牲烈士和逝世同胞的哀悼日。大家都通过各种方式表达了对逝者的悼念之情。比如，各大网站首页的色调都不再是之前的五彩绚烂，而是变成庄严沉重的灰黑色。如百度：在深深的哀悼后，回到我们的工作岗位。作为一名IT程序员，该如何实现让页面色调变灰呢？难道要重新设计与修改页面的配色，对页面上每张图片都一张张的处理吗？不...
使用CSS实现元素置灰
WanFengZhou
09-08 4210
以下css代码即可实现html元素置灰 html { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; filter: progid:DXImageTransform.Microsoft.BasicImage(gra
一行代码让网页变灰
icehill的专栏
04-04 480
今天看了下各大网站全部变灰，心想不会是程序员连夜赶工写了套css出来吧，后来了解了下，原来是用了filter这个属性，只需要加很少的几行代码。 最简单的方法在html标签中加上这行代码即可，当然在每个节点各自加上应该会兼容性更好。 style="-webkit-filter: grayscale(.95);" 原来 加了代码后的效果 filter属性官网介绍在这里： https://d...
css 网页置灰
yltrcc的博客
07-28 1386
不常用，对于某些重大哀悼活动，需要将网页页面置灰。
实现网页图文变灰效果
FantasyWeirdo的博客
04-04 282
html.gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: progid:DXIm...
正则 匹配 小括号
秀强的专栏
09-23 4745
小哥哥、小姐姐，如果这篇博客对你解决问题提供了一点帮助，欢迎点赞或扫描分类专栏下的支付宝的二维码来请我喝阔落，一分一角也是爱，十分感谢，难为情.jpg 文章目录正则表达式匹配小括号个人主页 正则表达式匹配小括号 错误用法： '1(aaa1'.replace(/1(aaa/g, 'b') 正确用法： 使用中括号[]将其包裹起来 '1(aaa1'.replace(/1[(]aaa/g, 'b') ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值