特殊日子如何通过css快速置灰网站表达对历史和长者的尊重及悼念

3.4k 字 29 分钟编程 / 前端写作于 2022年12月7日下午

🙂前言

The elder one, so wise and grand
With a wealth of knowledge in their hand
They’ve seen the world, and all its changes
Through every season, and all its phases

长者，如此伟大与睿智
手中掌握着无穷的知识
见识大千世界，阅尽万物变迁
穿行每个季节，领略所有阶段

Their stories are like ancient tomes
Filled with the wisdom of long ago
They’ve witnessed the rise and fall of kings
And the shifting of many things

他们的故事就像古代经典
书中包含的智慧历史久远
见证了几多帝王兴衰
亲历过几多沧桑巨变

But through it all, they stand tall
A beacon of strength and grace
Their spirit, unbroken, still shines bright
A guiding light in the darkest night

虽经历波折，仍巍然雄壮
如一座灯塔，散发优雅与力量
精神未曾屈折，依然闪耀光芒
在最黑暗的夜里为人指引方向

So let us honor the elder one
And learn from them, before they’re gone
For in their words, and in their deeds
Lies the truth that we all need.

所以让我们向长者敬礼
并在他们离去之前向他们学习
因为在他们的一言一行中
蕴藏着我们都需要的真理

–引用微博博主@谷大白话用chatGPT所写

🧐方法1：最快速一行css搞定

不考虑啥兼容问题直接给html标签添加以下css代码即可

1	`filter: grayscale(100%)`

🤔方法2：小波根据bilibili的代码修改

如果跟小波一样只需要保证现代浏览器则使用下面代码即可。

给html标签增加一个gray的class样式

html.gray
    -webkit-filter grayscale(85%) saturate(80%)
    -moz-filter grayscale(85%) saturate(80%)
    -ms-filter grayscale(85%) saturate(80%)
    -o-filter grayscale(85%) saturate(80%)
    filter grayscale(85%) saturate(80%)

html页面判断只让首页调用

1	`<html class="<%- is_home() ? 'gray' : '' %>" >`

bilibili原代码：(考虑兼容则可以直接使用b站的代码)

.gray{
    filter: grayscale(85%) saturate(80%);
    -webkit-filter: grayscale(85%) saturate(80%);
    -moz-filter: grayscale(85%) saturate(80%);
    -ms-filter: grayscale(85%) saturate(80%);
    -o-filter: grayscale(85%) saturate(80%);
    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=.85);
    -webkit-filter: grayscale(.85) saturate(.8);
}

为什么小波要改？

因为正常css3前缀兼容和标准写法顺序是前缀在前，标准写法在后
mdn上grayscale的解释，那默认用百分数是没问题的，小波不理解b站为啥后面又用小数重写？
grayscale() 函数将改变输入图像灰度。amount 的值定义了转换的比例。值为 100% 则完全转为灰度图像，值为 0% 图像无变化。值在 0% 到 100% 之间，则是效果的线性乘数。若未设置值，默认是 0。
mdn上saturate的解释
saturate() (en-US) 函数转换图像饱和度。amount 的值定义转换的比例。值为 0% 则是完全不饱和，值为 100% 则图像无变化。其他值是效果的线性乘数。超过 100% 则有更高的饱和度。若未设置值，则默认为 1。
progid:DXImageTransform.Microsoft.BasicImage() 兼容ie

😫css3`filter`置灰网站小波遇见的问题

如果背景图片有属性background-attachment: fixed;是不会置灰的

😚css3`filter`置灰网站扩展阅读

来自博客好友“杉星雪”的文章，通过js根据特定日期自动置灰《Butterfly主题添加特殊日子全局黑白模式》^[2]

不想增加一个js文件请求的话其实把下面代码放到自己主题文件的js文件中即可，当然前提是依赖了jq的，或者自己改下用js原生的document.querySelector()方法

var date = new Date
  , year = date.getFullYear()
  , month = date.getMonth() + 1
  , day = date.getDate();
const dateList = ["7/7", "9/18", "12/13"]
  , toMonthDay = `${month}/${date}`;
var beginDate = new Date("2022-11-30 12:13:00")
  , endDate = new Date("2022-12-07 00:00:01")
  , today = date;
(dateList.some((e=>e === toMonthDay)) || today >= beginDate && today <= endDate) && ($("html").css({
    filter: "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)",
    filter: "grayscale(100%)",
    "-webkit-filter": "grayscale(100%)",
    "-moz-filter": "grayscale(100%)",
    "-ms-filter": "grayscale(100%)",
    "-o-filter": "grayscale(100%)"
}),
console.log("昭昭前事，惕惕后人，勿忘历史，吾辈自强！"));