css 的 filter:grayscale 哀悼模式

页面整体黑白

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

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

研究了一下其源代码，发现针对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

css 的 filter:grayscale 哀悼模式相关推荐

css 滤镜 filter: grayscale();
filter 属性定义了元素(通常是)的可视效果(例如:模糊与饱和度). <!DOCTYPE html> <html> <head> <style> i ...
filter:grayscale(1) -- 使网页呈现哀悼模式
伟大的革命先烈们为我们祖国的诞生做出了巨大的牺牲,在相应节日里,我们的站点会呈现灰色哀悼模式,以此来纪念先烈们.国内大厂首页也是这样做的. filter 属性定义元素(通常是 <img>) ...
filter:grayscale(1)
filter:grayscale(1)使网页呈现哀悼模式伟大的革命先烈们为我们祖国的诞生做出了巨大的牺牲,在相应节日里,我们的站点会呈现灰色哀悼模式,以此来纪念先烈们. body{filter: g ...
如何修改页面呈现哀悼模式？
如何修改代码? 代码里怎么做的,使页面呈现哀悼模式??(其实是早上我司UI设计师跑来拿我电脑说我给你表演个哀悼) html {filter: grayscale(1); } filter:graysc ...
如何快速让你的站点进入灰白哀悼模式？
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 作者 | 小闪来源 | https://www.coo ...
由置灰引出的css滤镜filter是什么东西？
文章目录前言一.什么是置灰呀? (1)选择需要的元素全部置灰吧! (2)如何置灰中抽取子内容部分不置灰呢? (3)针对ie10.11怎么搞? 二.针对iframe的内容三.filter除置灰(g ...
filter: grayscale(%)；设置灰色遮罩层后，怎样让头像颜色不受灰色遮罩层影响？
如何实现想要实现用户头像颜色不变,其余地方显示灰色遮罩层这种效果呢? 1. 首先就要把给整篇文档添加filter: grayscale(%);这种方法给摒弃掉(虽然这个方法真的很快也很简单) 2. 使 ...
纪念日页面变灰是怎么实现的( filter: grayscale(100%)；)
在一些特殊的日子,我们可能会把页面变成灰色,我还有印象,有一次是一个国家纪念日,全部网页都变成了灰色,当时的4399小游戏都不能玩,我们思考一下他是怎么做到的呢,肯定不能一个一个的去改样式,其实他是用 ...
CSS3 filter grayscale 将整个界面变为黑白灰色调
通过外部样式 <link rel="stylesheet" type="text/css" href="myGrayscale.css" ...

css 的 filter:grayscale 哀悼模式

页面整体黑白

css 的 filter:grayscale 哀悼模式相关推荐

最新文章

热门文章