网站颜色是怎么变成灰色的了

首先打开开发者模式,按F12定位到html标签可以看到右边有几个属性:

html {

1. -webkit-filter: grayscale(100%);
2. -moz-filter: grayscale(100%);
3. -ms-filter: grayscale(100%);
4. -o-filter: grayscale(100%);
5. filter: grayscale(100%);
6. 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%);
   }

本人非专研前端,这里只做简单的介绍。文章有什么问题欢迎指出~