人的一生是短暂的,重要的是能够在短暂的时间内造就无限的价值。由衷的表示致敬我们将永远铭记!
众所周知我们平时使用的网站都是IT从业者辛勤劳动所创造出来的,其实创造一个黑白网页其实并不难,真的很简单,因为只需要一行代码。
html{-webkit-filter:grayscale(%);}
是的你没看错就这一行一个网页就变成了一个灰度图
下面我将进行一次简单的演示
这是一个非常简单的一段HTML代码
它的渲染结果是三个不同颜色的色块
下面我们加上上面那行代码
有变化了,是的所有的颜色都变成了黑白色,那么会有小伙伴问如果换成图片那
下面新加了图片背景后的代码和运行效果对比
没有那行代码
加了那行代码
事实证明这个效果确实是那行代码的产物
原理解析
-webkit-filter属于CSS3,它的作用就是滤镜,通过后面的参数
grayscale(%),这是一种滤镜效果,作用就是将图像转换为灰度图像它内部的百分比参数则是转化程度。
是不是很简单,赶快试一下吧