如何把网页变成黑白

这个功能可能平时并不需要, 但是今天2020年4月4日,为了哀悼抗疫中牺牲的英雄们,很多网站都变成了黑白的,今天就来看看技术上怎么实现

用css3中的filter属性,可以实现一些像ps中的简单滤镜效果:

灰度: grayscale

模糊: blur

对比度: contrast

色相旋转: hue-rotate

阴影: drop-shadow

 

实现纯黑白效果,只需给html标签设置样式 filter: grayscale(100%);

利用hue-rotate可以实现颜色的渐变动画

drop-shadow可以实现不规则图形的阴影, 区别于box-shadow

 

注意点: filter属性有兼容性问题, ie是不支持的