摘要 今天小编跟大家讲解下有关CSS3 filter(滤镜) 网站整体变灰色调 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS3 filt

今天小编跟大家讲解下有关CSS3 filter(滤镜) 网站整体变灰色调 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS3 filter(滤镜) 网站整体变灰色调 的相关资料，希望小伙伴们看了有所帮助。

国家一些重要的公祭日 通常很多网站的色系都会整体变成灰色调 那是怎么实现的 其实很简单 在body上整体加一段样式即可。

完整css代码如下 filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); 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=1); -webkit-filter: grayscale(1)filter介绍

css3 Filter（滤镜）属性提供了提供模糊和改变元素颜色的功能。css3 Fitler 常用于调整图像的渲染、背景或边框显示效果。主要效果介绍：

blur(px) 模糊 默认0px 值越大越模糊brightness(%) 更亮或更暗 如果值是0%(全黑),值是100%(无变化),>100%(更亮)contrast(%) 对比度 值是0%(全黑),值是100%(无不变),>100%(更低的对比)grayscale(%) 灰度 值为100%(转为灰度图像) 值为0%(无变化) 值在0%到100%之间opacity(%) 透明度 值为0%(完全透明) 值为100%(无变化),与opacity属性类似sepia(%) 褐色 取值0%-100%invert(%) 反转颜色 取值0%-100%drop-shadow(h-shadow v-shadow blur spread color) 设置阴影 该函数与box-shadow属性很相似 不同之处在于 通过滤镜一些浏览器为了更好的性能会提供硬件加速

来源：爱蒂网