Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >网站如何快速全页置灰？

网站如何快速全页置灰？

作者头像

蓓蕾心晴

发布于 2022-12-07 06:21:12

发布于 2022-12-07 06:21:12

50600

代码可运行

举报

文章被收录于专栏：前端小叙前端小叙

运行总次数：0

代码可运行

实现网站全页面快速置灰，可以使用一个 css 属性，加到 html 标签上，即可快速实现

filter: grayscale(100%);    
-webkit-filter: grayscale(100%);    //兼容chrome和safari
-moz-filter: grayscale(100%);     //兼容Firefox
-ms-filter: grayscale(100%);     //兼容IE、Edge
-o-filter: grayscale(100%);       //兼容Opera
filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)

参考文章：

https://blog.csdn.net/qq_45695853/article/details/122111996

https://www.panziye.com/java/5781.html

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-12-06，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

Go 开发者必备：Protocol Buffers 入门指南

10分钟带你彻底搞懂分布式链路跟踪

多租户的 4 种常用方案

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

60页PPT全解：DeepSeek系列论文技术要点整理

12月13日国家公祭日—勿忘国耻

本文最后更新于2021年12月13日，已超过1年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢!

回忆大大

2023/03/09

3080

12月13日国家公祭日—勿忘国耻

昨天全国哀悼日，全站变灰，我们都这么做

原文链接：https://juejin.im/post/5e86e221e51d4546ce27b99c

歪马

2020/04/16

2.1K0

昨天全国哀悼日，全站变灰，我们都这么做

css 常用代码分享

css html 编程算法

3. 去掉Webkit(chrome)浏览器中input(文本框)或textarea的黄色焦点框

用户7705674

2021/09/22

9360

网站全局黑白代码

深切哀悼抗疫烈士和逝世同胞，愿逝者安息，愿生者奋发，愿祖国昌盛深切哀悼抗疫烈士和逝世同胞，愿逝者安息，愿生者奋发，愿祖国昌盛

Inkedus

2020/04/16

9760

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

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

沈唁

2018/12/26

8080

网站都变成灰色了，它是怎么实现的？

html css 网站

想必大家都感受到了，很多网站、APP 在昨天都变灰了，变灰的原因是为了纪念一位伟人。

沉默王二

2023/03/08

1K0

网站都变成灰色了，它是怎么实现的？

网站一键置灰

网站 css hexo

首先找到 hexo 博客 theme 下当前使用的主题文件，/themes/halo/layout/_partial/head.ejs(针对自己的)，加入以下

leader755

2022/03/09

1.3K0

网页中图片去色问题是什么_网页问题

svg javascript css https

网页中经常需要一种js效果，就是鼠标经过某张图片，图片去色。为了不加载两张图片（一张彩色和一张灰色），在网上找到了一些方法。

全栈程序员站长

2022/11/08

1.2K0

网页中图片去色问题是什么_网页问题

今天网站都变成灰色了，这其中是怎么实现的？

css svg https html 网络安全

我们的国家经历了非常惨痛的时刻，很多英雄在救助他人的路上倒下，更有很多烈士英雄保卫人民的安危遇难，今天全国下降半旗，北京时间 10 点全国默哀三分钟，来致敬英雄们。同时今天一切公共娱乐活动也都会停止，包括直播、综艺、影视、游戏等等。

章鱼猫先生

2021/10/15

4.4K0

今天网站都变成灰色了，这其中是怎么实现的？

CSS filter-网页变灰

今天很多网站都变灰了，比如简书、B 站、爱奇艺、CSDN 、百度等等。我们选择一个网站，比如 B 站吧，打开浏览器开发者工具。审查一下网页的源代码，我们可以发现在 html 的这个地方多了一个疑似的 class，叫做 gray（灰色）

小简

2022/12/29

9550

CSS filter-网页变灰

CSS3魔法堂：CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　 IE特有的滤镜常常作为CSS3各种新特性的降级处理补充，而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性，因此当前仅Webkit内核的浏览器支持CSS3 Filter，而FF和IE10+则需要使用SVG滤镜(svg effects for html)或Canvas作为替代方案处理了，而IE5.5~9则使用IE滤镜、JS+DIV或VML处理！本篇为先占个坑，以后慢慢填^_^！！！ CSS3 Filter

^_^肥仔John

2018/01/18

2K0

CSS3魔法堂：CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解

几行样式代码，让你的网站全站和图片都变成灰色|CSS样式灰色代码

html 网站 css http flash

小编这里试用了下面的几种方法，一般用方法一的效果会更好一些，用其他的几种方法，或多或少的原来网站的部分浮动的样式或者点击效果会失效，导致功能不能用了。

小小鱼儿小小林

2020/06/24

1.1K0

几行样式代码，让你的网站全站和图片都变成灰色|CSS样式灰色代码

网站都变成灰色了，它是怎么实现的？

java css html spring 网站

方案 1，换一套灰色的 UI，那显然成本太大了，用脚指头想一想就知道不太可能。

宜轩

2022/12/29

9650

css 去色_css按钮点击改变颜色

https 网络安全

网站设计师在设计网页时，有时将一块图片设计成灰色，鼠标移上去，图片就有颜色。一般的逻辑是做两张图片，然后在鼠标上做图片切换事件。当然这种方法可以完美是实现，

全栈程序员站长

2022/11/08

3.8K0

网站都变成灰色了，怎么实现的？

网站 css flash html

有些时候我们需要把网站页面变成黑白色或灰色，特别是对于一些需要悼念的日子，以及一些影响力很大的伟人逝世或纪念日的时候，都会让网站的全部网页变成灰色（黑白色），以表示我们对逝者或者英雄的缅怀和悼念。

程序员大彬

2022/12/22

9580

网站都变成灰色了，怎么实现的？

BAT 用一行代码实现了网页黑白显示

css svg https 网络安全 ios

从上面的实现方式可以看到，关键技术是利用了 CSS 的 filter 技术，也就是 CSS 的滤镜功能。

桃翁

2020/04/23

7290

BAT 用一行代码实现了网页黑白显示

网站变灰色的代码

flash 网站 css

使用方法：将上访任意一种代码加到CSS最顶端就可以实现素装。建议全国站长动起来。响应全国哀悼日，哀悼那些为了我们美好明天献出宝贵生命的英雄们。如果网站后天没有设置自定义CSS的地方，也可以在网页/模板的HTML代码和之间插入下方代码：

Z4

2020/04/21

1.3K0

整个网站变灰css样式

4月4日举行全国哀悼，致敬英雄，缅怀英烈。各大网站和视屏都在变灰，于是我也学习了一下css样式，向英雄致敬！

十分钟空间

2022/08/17

1.5K0

WordPress 全局灰色代码

摘要下面这行代码可以使Wordpress全局变成灰色。代码部分 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:DXImageTransfo

Balliol Chen

2022/04/19

6440

如何在网页置灰的时候，部分元素保持彩色-有意思的面试题

css 编程算法

最近哀悼日，网页端如何一键变灰已经有很多实现方式了，但是我看到一个推文很有意思，是一个不错的面试题

花果山大圣

2022/12/07

8840

如何在网页置灰的时候，部分元素保持彩色-有意思的面试题

相关推荐

12月13日国家公祭日—勿忘国耻

更多 >

本文部分代码块支持一键运行，欢迎体验

本文部分代码块支持一键运行，欢迎体验