grayscale(amount) : 对图片进行灰度转换。
amount转换值的大小,可以是数字或百分比。
当值为 100% 时,灰度最大。
0% 时与原图没有区别。
0% 到 100% 之间的值会使灰度线性变化。
amount 为空时使用值为1。
CSS代码,任选一种方式
filter: grayscale(100%);
filter: grayscale(1);
为了方便,可以在后台这样加入
<style type="text/css">
html {
filter: grayscale(100%);
}
</style>
适配多种浏览器
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
还有一些其他的效果
/*blur 模糊*/
filter:blur(2px);
/*brightness 亮度*/
filter:brightness(25%);
/*contrast 对比度*/
filter: contrast(50%);
/*drop-shadow 阴影*/
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
/*opacity 透明度*/
filter: opacity(50%);
/*grayscale 灰度*/
filter: grayscale(80%);
/*sepia 褐色*/
filter: sepia(100%);
/*invert 反色*/
filter: invert(100%);
/*hue-rotate 色相旋转*/
filter:hue-rotate(180deg);
/*saturate 饱和度*/
filter: saturate(1000%);