中国共产党中央委员会、中华人民共和国全国人民代表大会常务委员会、中华人民共和国国务院、中国人民政治协商会议全国委员会、中国共产党和中华人民共和国中央军事委员会，极其悲痛地向全党全军全国各族人民通告：我们敬爱的江泽民同志患白血病合并多脏器功能衰竭，抢救无效，于2022年11月30日12时13分在上海逝世，享年96岁。
12月1日，包括淘宝，京东，抖音，B站，简书，掘金等常上的网都黑白色了，作为一个技术人。
有那么5s终觉得确实好高大上啊，一瞬间控制了彩色，仔细一想，不可能随时准备着2套图片啊。每个人的推荐都不一样，对吧，所以上网搜了一下。
真的一句话。
实验
以公司的官网做了个实验，前后效果如下:
image.png
image.png
一行代码
filter: grayscale(1)
为了使整个网页生效，你可以把它放在 <html> 标签的样式里。直接写到 html 文件内（或用内联样式，像我上面修改），例如：
<style>
html {
filter: grayscale(1);
}
</style>
为了更好的兼容性，你可以补一个带 -webkit- 前缀的样式，放在 filter 后面：
<html style="filter:grayscale(1);-webkit-filter:grayscale(1)">
...
</html>
原理
使用了 CSS 特性 filter，并用了 grayscale 对图片进行灰度转换，允许有一个参数，可以是数字（0到1）或百分比，0% 到 100% 之间的值会使灰度线性变化。
如果你不想完全灰掉。可以设置个相对小的数字。
掘金首页是设置了 0.95，也挺大的，看不出彩色。
但如果你的网页内有「绝对和固定定位」元素，一定要把 filter 样式加到 <html> 上。
网友评论