网站的灰色效果是怎么做出来的？

IT技术 • Hollywood • 发表于 4 年前 • 最后回复来自 baiwei123 • 4 年前

外行人请教一个问题：
今天这个特别的日子，所有的网站（包括光谷社区网站）都是黑白灰的，不知道这个效果是怎么做出来的？

共收到12条回复

saint318 4 年前 #1

RGB to Grey 应该不难

lyvv 4 年前 #2

加一个css

bunorte 4 年前 #3

css加一句代码就实现了，很多年前就玩过的老梗。

hustxjtu 4 年前 #4

-webkit-filter: grayscale(100%);

whclive 4 年前 #5

-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;

kindkiss 4 年前 #6

更深层次的原理是什么

easimonisniper 4 年前 #7

@bunorte 光谷社区元老级人物！致敬

piger 4 年前 #8

@kindkiss
就是RGB转灰度图，一个公式就可以搞定
https://blog.csdn.net/x5675602/article/details/80014683

Hollywood 楼主 4 年前 #9

谢谢各位解答，学习了

bigkongfupanda 4 年前 #10

参考张鑫旭的文章：https://www.zhangxinxu.com/wordpress/2012/08/css-svg-filter-image-grayscale/

bigkongfupanda 4 年前 #11

最简单的办法是在 html 根节点上面设置css属性，b站就是这么操作的

baiwei123 4 年前 #12

html { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
一串代码搞定放在你共用的CSS 文件最上面保存!

请绑定手机号后，再发言，点击此处