css 的 filter:grayscale 哀悼模式

最新推荐文章于 2025-05-15 14:13:02 发布

qq1208013747

最新推荐文章于 2025-05-15 14:13:02 发布

阅读量1.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： css部分文章标签： css javascript 前端

本文链接：https://blog.csdn.net/ss043500/article/details/128147763

css部分专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何通过简单代码使网站进入哀悼模式，包括使用CSS滤镜grayscale实现页面及Flash内容的整体灰度化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面整体黑白

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

变成哀悼模式后图片文字视频都会要求变成灰色

研究了一下其源代码，发现针对html有如下样式
在这里插入图片描述
filter 有11个参数：

blur (px) 高斯模糊，单位是像素。如：blur(5px)

drop-shadow (h-shadow v-shadow blur spread color) 阴影，如：drop-shadow(8px 8px 10px red);

hue-rotate (deg) 色相，值表示角度（0-360）

以下数值均为百分比(%)

以下三个以100%为基准，即无变化，往上为增，往下为减。

brightness: 明度

contrast: 对比度

saturate: 饱和度

以下四个范围为（0~100%）

grayscale: 灰度

invert: 颜色反转，类似底片效果

opacity: 透明度

sepia: 棕褐色，类似老照片效果

url: 函数接受规定 SVG 滤镜的 XML 文件的位置，并且可以包含指向特定滤镜元素的锚点。实例：filter: url(svg-url#element-id)

如果某些带有Flash的页面仍显示彩色，或浏览器上下滚动条拖动时Flash FLV播放器变花（例如剑网3、剑侠世界官网分流页），将Flash改为JS输出（本例为SWFObject）

<script type="text/javascript" src="/js/swf.js"></script> 
<div id="video_content"></div> 
<script type="text/javascript"> 
<!-- 
var video_player_so = new SWFObject("video-542.swf", "sotester", "439", "246", "7"); 
video_player_so.addParam("wmode", "opaque"); 
video_player_so.addParam("allowfullscreen","true"); 
video_player_so.addParam("allowscriptaccess","always"); 
video_player_so.write("video_content"); 
//--> 
</script>

这样，整个页面，包括Flash播放器中的视频就都变灰色了。

有一些网站FLASH动画的颜色不能被CSS滤镜控制，可以在FLASH代码的<object …>和之间插入：
代码如下:

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

经过项目测试，下面这段代码可以接机大部分问题：

html{ 
	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=\'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); 
	-webkit-filter: grayscale(1);
	}

关于 css 的 filter:grayscale 哀悼模式参考
https://blog.csdn.net/bigbear00007/article/details/101641038?ops_request_misc=&request_id=&biz_id=102&utm_term=%E5%93%80%E6%82%BC%E9%A1%B5%E9%9D%A2%E5%8F%98%E7%81%B0&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduweb~default-1-101641038.nonecase&spm=1018.2226.3001.4187