2020年4月4日全国哀悼日这一天,我发现不少网址都变灰了,我第一想法就是怎么做到的?不可能换素材整个网址重做一遍吧?后面发现是用的其实是css的filter滤镜:
grayscale可以将图像转化为灰度图像:
html { filter: grayscale(.95); }
视频、canvas之类都会变灰:
用egret做的游戏也变灰了。
那除此之外,filter还有什么作用呢?
可以用它的brightness属性来做移动端标签的点击阴影效果,不用设计再出一张图啦:
brightness:可以控制图像的明亮度,默认值为1
.app-link { filter: brightness(.8); }
效果: