大良建站公司行业现状,sem 推广软件,广州积分入学网站,wordpress主题被留后面文章目录前言一、实现原理剖析二、对需要修改的 CSS 定位三、具体代码实现及灰度区分总结前言 公祭日其世界意义在于#xff0c;促使人类历史记忆长久保持唤醒状态#xff0c;而避免出现哪怕是片刻的忘却与麻木#xff0c;共同以史为鉴、开创未来#xff0c;一起维护世界和…
文章目录前言一、实现原理剖析二、对需要修改的 CSS 定位三、具体代码实现及灰度区分总结前言 公祭日其世界意义在于促使人类历史记忆长久保持唤醒状态而避免出现哪怕是片刻的忘却与麻木共同以史为鉴、开创未来一起维护世界和平及正义良知促进共同发展和时代进步。可能也会有小伙伴们好奇公祭日当天好多大型网站主页都变成了黑白色调用以提醒人们铭记历史勿忘国殇在技术层面看这是如何实现的呢 说明由于部分原因本文修改案例为无版权网站 Pixabay。
一、实现原理剖析
正常页面就是我们日常所看到的如下图所示 要实现页面整体色调变换我们一般都是直接去 CSS 文件里面进行修改那么具体应该怎么做呢
二、对需要修改的 CSS 定位
我们这里通过打开 Google 浏览器调试模式来实现快速预览。
首先在 Elements 里面点击 body 标签在右侧出现的功能栏里找到 style 属性具体点击位置如下图所示 这里我们将通过修改全文 element 的 style 来实现快速实现页面色调修改具体位置如下图所示 当然具体代码中我们就在 element.style 调整即可具体代码如下
element.style {
}三、具体代码实现及灰度区分
这里我们用到过滤器 filter输入 filter我们可以看到它有众多的属性如下图所示 我们本次用到的属性是灰度 grayscale()括号里面跟的是元素灰度百分比。在下面的步骤中我将按照灰度递增的顺序来带大家认识不同灰度对页面的实现效果。
当灰度百分比为 0 时我们可以看到页面是正常状态的所以正常页面默认 grayscale(0)这时实现代码及页面状态如下图所示
element.style {filter: grayscale(0);
}当灰度百分比为 0.550% 时我们这时看到页面变成了半灰度状态这时实现代码及页面状态如下图所示
element.style {filter: grayscale(0.5);
}当灰度百分比为 1100% 时我们这时看到页面变成了全灰状态即黑白页面这时实现代码及页面状态如下图所示
element.style {filter: grayscale(1);
}这时的页面也就是我们在公祭日当天所看到的页面状态黑白色。 总结 每个民族都有每个民族的历史“中国人民抗日战争的胜利为世界反法西斯战争的胜利作出了不可磨灭的历史贡献共同消除了威胁世界和平的法西斯邪恶势力壮大了人类的进步力量促进了全球的民族解放运动对世界和平事业产生了深远影响。” 我是白鹿一个不懈奋斗的程序猿。望本文能对你有所裨益欢迎大家的一键三连若有其他问题、建议或者补充可以留言在文章下方感谢大家的支持
