文章目录

• 前言
• 一、什么是置灰呀？
• • （1）选择需要的元素全部置灰吧！
  • （2）如何置灰中抽取子内容部分不置灰呢？
  • （3）针对ie10、11怎么搞？
• 二、针对iframe的内容
• 三、filter除置灰（grayscale）外的其他属性

前言

为什么突然想起做这个笔记呢？主要追溯到最近晚上客户在我看鬼片的时候让我帮忙置灰网站这个事情开始，同时也在这里志哀下老同志把。

一、什么是置灰呀？

直接给我的现代浏览器挂上灰色,怎么挂呢？上灰度把，毕竟图片识别基础也是灰度来的，应该有方法。
filter: grayscale(paramter);
paramter ： 支持0 ~ 1，也支持0 ~ 100% ，主要是灰度的层度，看前面的前缀 gray 就知道了~

（1）选择需要的元素全部置灰吧！

管他三七二十一，需要在哪个节点内容上全部置灰就加上去

样式操作

/*全局变灰*/
body{filter:grayscale(100%);-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);
}
/*a部分变灰*/
.area-a{filter:grayscale(100%);-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);
}

（2）如何置灰中抽取子内容部分不置灰呢？

话说不可能整个区域都需要加的吧，当然你可以说疯狂逗号加选择器什么的就可以，但是这里简短的话，用 not 更方便

样式操作

/*  not 用法 */
/*body 内除了area-a-one和本体area-a之外其他变灰,*/
body :not(.area-a,.area-a-one){filter:grayscale(100%);-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);
}/* 常规操作 */
body {filter:grayscale(100%);-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);
}.area-a-one{filter:none;}

（3）针对ie10、11怎么搞？

由于IE10、11上有时候并不能正确的执行filter的grayscale样式，一般来说需要我们手动去改色之类的。
这里可以存在两种方式：（值得一提的是，其实这两种方法都有点慢，但是能基本达到目标）
① 自己根据网站元素的类型，通过js去逐一变色。
②调用通用的grayscale.js 来对网站置灰。
首先说明，网上那些什么改样式的，一般都是无敌复制黏贴扯淡。

二、针对iframe的内容

实际上也存在说一个网站内引入嵌套其他网站的情况存在，这时候如果直接全局顶部dom元素 采用filter置灰 ，则会使得iframe被隐藏掉。（当然这里指的是现代浏览器）
建议：
单独为iframe配置置灰，若全局，则需要按照一的模式排除一下iframe的内容。

三、filter除置灰（grayscale）外的其他属性

下面属性仅供现代浏览器参考，可能存在浏览器不兼容问题，需要参考mdn或w3c比较。。
总体来讲，就是可以做一个h5的图像处理器使用，加上屏幕画板，即可做简单的图片编辑功能。