网站页面黑白色效果实现技巧
晚上下班回到家中,惯例打开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() ;