网站页面黑白色效果实现技巧

晚上下班回到家中，惯例打开B站，B站首页变成了黑白色主题。

B站首页是如何做到的黑白主题？

如果首页html换成黑白风格的，这个好实现。可是每个视频封面图都重新做一张黑白的版本，每个视频都是up主自己的投稿视频啊，怎么保证封面图都能黑白色呢？后期靠人工换的话，那代价也大了，而且也很傻。

 

那么能不能靠技术手段解决呢？

让我们打开开发者工具看看页面具体的样式。

突然我发现在html根结点html标签下面有一个属性：filter: grayscale(1);

我们来看看MDN的解释： 

grayscale( )表示灰度值，可以从0%～100%，也可以.grayscale( .1) grayscale( .55)这样写。当我们grayscale(1)时，就表示最大的灰度值，也就是说颜色只剩下了黑白。

真相大白，原来只需要一个css属性：filter: grayscale(1); 就可以将整个页面变为黑白色，色彩感觉像极了小时候的黑白电视。

 

更多

除了黑白色，我们还可以实现别的效果吗？是可以的，请注意filter属性，MDN如是说：

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。

模糊度： filter: blur();

对比度：filter: contrast();

色相旋转：filter: hue-rotate(); 

阴影： filter: drop-shadow() ;