如何让网页变成灰色

引入

在一些特殊的日子（一些需要悼念的日子，以及一些影响力很大的伟人逝世或纪念日）里，比如今天 12 月 13 日国家公祭日，站长希望自己的网页显示为灰色（黑白色）的显示效果，以表示我们对逝者或者英雄的缅怀和悼念。

可以尝试在 css 里添加如下代码

html {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%); /*灰度的滤镜*/
  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);
}

若上述方法无效

可能由于网站使用这个 css 未能生效，是因为网站没有使用最新的网页标准协议，请尝试将网页最头部的替换为以下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

还有一些网站 FLASH 动画的颜色不能被 CSS 滤镜控制，可以在 FLASH 代码的和之间插入

<param value="false" name="menu"/>
<param value="opaque" name="wmode"/>

案例

对于很多的博客系统包括网盘系统等等在后台就可以插入 css 自定义，下面我以兰空图床为例

在后台管理，找到系统 → 主题管理 → 高级设置 → 在自定义 css 黏贴源码即可

对于其他的系统也可通过此方法实现，对于一些场景按需修改作用的对象即可。

参考

一键让网站变灰的 CSS 代码 https://chenchunbo.blog.csdn.net/article/details/127906660?fromshare=blogdetail&sharetype=blogdetail&sharerId=127906660&sharerefer=PC&sharesource=qq_50910200&sharefrom=from_link

你好鸭！

菰城鸥鹭

infp 调停者

站长

不具版权性

不具时效性

文章内容不具时效性。若文章内容有错误之处，请您批评指正。

切换评论

如何让网页变成灰色

引入

案例

参考

切换评论系统

热门文章