几行代码将网站变为灰色，特殊哀悼日全站变灰的设置方法

分手后的思念是犯贱 2023-10-07 21:42 7阅读 0赞

一般在全国哀悼日、大型自然灾害，如大地震、大水、疫情等重大事故的时候，我们都会把自己的网站，全站变成灰色！以表示对逝者的悼念！

那需要如何来实现网站整站变灰？

首先我们看看这些知名大厂的做法：

### **腾讯网的做法：** ###

<style>
    body *{
    -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- */
    }
    </style>

<style>body \*\{-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- \*/\}</style>

把这个样式放到全局css中即可

ps：这个我试过，可以用，VUE项目打包之后，把这一段代码直接粘贴到index.html的style中就可以完美生效

### **1.网页黑白代码外部样式（写入\*.css文件请用）** ###

html {
      filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
      -webkit-filter: grayscale(100%);
    }

### 2.网页黑白代码内部样式（写入头部head标签里面） ###

<style type="text/css">
    
    </style>

### 3.网页黑白代码内联式（写入html标签，找到html） ###

<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);">

可能还有其它方法，欢迎添加

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关将网站从http变为https的步骤

将网站从HTTP变为HTTPS的步骤如下： 1. 购买SSL证书：首先，您需要购买SSL证书。您可以从SSL证书提供商处购买，例如Comodo、Symantec或DigiC

蔚落/ 2024年03月25日 18:41/ 0 赞/ 56 阅读

相关 CSS网页变灰色代码方法分享

发生重大哀悼事件时候，很多网站都将网站变灰色以示哀悼。在此我给大家总结了两种CSS网页变灰色代码方法，分享给大家。 ![2a739316b49c466eb91216e6b81

淩亂°似流年/ 2024年03月16日 16:34/ 0 赞/ 29 阅读

相关几行代码将网站变为灰色，特殊哀悼日全站变灰的设置方法

一般在全国哀悼日、大型自然灾害，如大地震、大水、疫情等重大事故的时候，我们都会把自己的网站，全站变成灰色！以表示对逝者的悼念！那需要如何来实现网站整站变灰？首先我们看看

分手后的思念是犯贱/ 2023年10月07日 21:42/ 0 赞/ 8 阅读

相关网页变灰方法

网页变灰方法 <style type="text/css"> html { filter:grayscale(100%); -webk

太过爱你忘了你带给我的痛/ 2023年09月26日 17:09/ 0 赞/ 78 阅读

相关使网站网页变灰方法汇总

1.应用场景 <table> <tbody> <tr> <td> <p>一般在清明节，全国哀悼日，大地震的日子，以及一些影响力很大的伟人逝世或纪念日的时候，

阳光穿透心脏的1/2处/ 2023年07月22日 03:53/ 0 赞/ 28 阅读

相关哀悼日-网站置为灰色

filter: grayscale(100%); ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_

我会带着你远行/ 2023年07月21日 15:28/ 0 赞/ 15 阅读

相关默哀日、灾难日，纪念日，哀悼日等网站都变成黑白色

4月4日是全国的哀悼日，网站需要临时处理，变成黑白色。怎么才能快速的将网站变成黑白色呢？ <body style="-webkit-filter: grayscale

- 日理万妓/ 2023年07月21日 14:29/ 0 赞/ 19 阅读

相关 css全屏变灰色（特殊节日使用）

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

谁借莪１个温暖的怀抱￠/ 2023年02月18日 08:16/ 0 赞/ 23 阅读

相关如何让网站快速变灰

利用css滤镜，可使网站快速变灰，实现代码如下： html { 　　filter: grayscale(100%); 　　-webkit-filte

小咪咪/ 2022年12月03日 09:54/ 0 赞/ 224 阅读

相关网站图片变灰的通用CSS解决方案

<style> html { -webkit-filter: grayscale(100%); -moz-filter: grayscale

逃离我推掉我的手/ 2022年07月15日 00:49/ 0 赞/ 351 阅读