想必大家都感受过了,很多网站在一夜之间变成了灰色。
效果如下:
这是B站的
这是CSDN的
那么这种效果怎么实现呢?
在网页按下F12,打开开发者模式,用元素选择器定位HTML标签,在样式版上就可以看到下面的代码。
filter: grayscale(85%) saturate(80%);
-webkit-filter: grayscale(85%) saturate(80%);
-moz-filter: grayscale(85%) saturate(80%);
-ms-filter: grayscale(85%) saturate(80%);
-o-filter: grayscale(85%) saturate(80%);
filter: url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=.85);
-webkit-filter: grayscale(.85) saturate(.8);
打开一个新的网站
将上面的代码添加到HTML上
可以发现网站变灰了。
那么这段代码是什么意思呢?
直接搜索filter grayscale
当参数为0时显示正常
60%时
100%时
grayscale()函数是一个内置函数,用于对图像应用滤镜以设置图像的灰度,此函数接受包含灰度值的单个参数量。灰度值根据数量和百分比设置。值0%表示原始图像,而值0%至100%之间的值表示效果的线性乘数。返回值为一个filter函数。
filter 函数可以用来改变图像的显示效果,用于 CSS 的 filter 属性。除了 grayscale 函数,可选项还有以下这些: