在HTML中让网页变黑白、变灰有一个最佳的解决方案，就是通过CSS来调整。
在CSS3中有一个属性filter，翻译中文过滤器的意思，开源调整网页元素包括图像的效果。
网页灰色黑白
这样使整个页面的灰度100%，也就变成灰色、黑白的感觉，对图片也有效。
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
也可以只对部分元素操作，包括图片：
div img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
加上-webkit- -moz- -ms- -o- 是为了兼容不同浏览器。
CSS3 filter
filter 属性定义元素（通常是 ）的视觉效果（如模糊和饱和度）。
| 默认值： | none |
|---|---|
| 继承： | 否 |
| 动画制作： | 支持。 |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.filter="grayscale(100%)" |
滤镜函数
注释：使用百分比值（例如 75％）的滤镜，也接受该值是十进制（例如 0.75）。
| 滤镜 | 描述 |
|---|---|
| none | 默认值。规定无效果。 |
| blur(px) | 对图像应用模糊效果。较大的值将产生更多的模糊。如果为指定值，则使用 0。 |
| brightness(%) | 调整图像的亮度。* 0％ 将使图像完全变黑。* 默认值是 100％，代表原始图像。* 值超过 100％ 将提供更明亮的结果。 |
| contrast(%) | 调整图像的对比度。* 0％ 将使图像完全变黑。* 默认值是 100％，代表原始图像。* 超过 100％ 的值将提供更具对比度的结果。 |
| drop-shadow(h-shadow v-shadow blur spread color) | 对图像应用阴影效果。可能的值：* h-shadow - 必需。指定水平阴影的像素值。负值会将阴影放置在图像的左侧。* v-shadow - 必需。指定垂直阴影的像素值。负值会将阴影放置在图像上方。blur -可选。这是第三个值，单位必须用像素。为阴影添加模糊效果。值越大创建的模糊就越多（阴影会变得更大更亮）。不允许负值。如果未规定值，会使用 0（阴影的边缘很锐利）。spread - 可选。这是第四个值，单位必须用像素。正值将导致阴影扩展并增大，负值将导致阴影缩小。如果未规定值，会使用 0（阴影与元素的大小相同）。注释：Chrome、Safari 和 Opera，也许还有其他浏览器，不支持第 4 个长度；如果添加，则不会呈现。color - 可选。为阴影添加颜色。如果未规定，则颜色取决于浏览器（通常为黑色）。这个例子创建了红色的阴影，水平和垂直方向均为 8px，带有 10px 的模糊效果：filter: drop-shadow(8px 8px 10px red);提示：这个滤镜类似 box-shadow 属性。 |
| grayscale(%) | 将图像转换为灰阶。* 0% (0) 是默认值，代表原始图像。* 100％ 将使图像完全变灰（用于黑白图像）。注释：不允许负值。 |
| hue-rotate(deg) | 在图像上应用色相旋转。该值定义色环的度数。默认值为 0deg，代表原始图像。注释：最大值是 360deg。 |
| invert(%) | 反转图像中的样本。* 0% (0) 是默认值，代表原始图像。* 100％将使图像完全反转。注释：不允许负值。 |
| opacity(%) | 设置图像的不透明度级别。opacity-level 描述了透明度级别，其中：* 0% 为完全透明。* 100% (1) 是默认值，代表原始图像（不透明）。注释：不允许负值。提示：这个滤镜类似 opacity 属性。 |
| saturate(%) | 设置图像的饱和度。* 0% (0) will make the image completely un-saturated.* 100% is default and represents the original image.* Values over 100% provides super-saturated results.注释：不允许负值。 |
| sepia(%) | 将图像转换为棕褐色。* 0% (0) 是默认值，代表原始图像。* 100％ 将使图像完全变为棕褐色。注释：不允许负值。 |
| url() | url() 函数接受规定 SVG 滤镜的 XML 文件的位置，并且可以包含指向特定滤镜元素的锚点。实例：filter: url(svg-url#element-id) |
| initial | 将此属性设置为其默认值。 |
| inherit | 从其父元素继承此属性。 |
