首先打开开发者模式,按F12定位到html标签可以看到右边有几个属性:
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);
}
在早期网页要实现图片的色相旋转、灰色度的变化，只能用ie的滤镜来实现。直到CSS3到来，就可以使用filter来实现了。
-webkit-filter支持的效果有如下:
blur 模糊brightness 亮度contrast 对比度drop-shadow 阴影grayscale 灰度opacity 透明度sepia 褐色invert 反色saturate 饱和度hue-rotate 色相旋转
所以,如果设置灰色的话,就设置如下
-webkit-filter: grayscale(100%);filter: grayscale(100%);
当然如果不想用于整个网页的话,可以将这两个属性加到想要设置成灰色的标签里也是可以的如下:
img{-webkit-filter: sepia(100%);filter: sepia(100%);}
本人非专研前端,这里只做简单的介绍。文章有什么问题欢迎指出~
