html{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
grayscale 是一个 CSS 函数,可以把图像转成灰色,参数是个百分比,结果返回一个 filter 函数。
filter 函数可以用来改变图像的显示效果,用于 CSS 的 filter 属性。 除了 grayscale 函数,可选项还有以下这些:
blur() 模糊图像。
brightness() 使图像更亮或更暗
contrast() 增加或减少图像的对比度
drop-shadow()在图像后面应用阴影
grayscale() 将图像转换为灰度
hue-rotate() 更改图像的整体色调
invert() 反转图像的颜色
opacity() 使图像透明。
saturate() 对输入图像进行超饱和或去饱和处理
sepia() 将图像转换为棕褐色
目前的主流浏览器版本都支持 grayscale 函数,比如说 PC 端的 Chrome、edge、Firefox、Opera、Safari 等等,除了 IE。