使用CSS3编写灰阶滤镜来制作黑白照片效果的方法

当我们需要在网站中使用黑白照片来营造一些特殊的氛围或者突出一些内容时，使用CSS3灰阶滤镜是一种非常方便快捷的方式。

当我们需要在网站中使用黑白照片来营造一些特殊的氛围或者突出一些内容时，使用CSS3灰阶滤镜是一种非常方便快捷的方式。

使用CSS3灰阶滤镜的基本语法：

filter:grayscale(100%);

具体步骤如下：

Step 1：将要设置灰度滤镜的元素进行选择。

img{
  filter:grayscale(100%);
}

Step 2：将要设置的元素添加灰阶滤镜样式。

img {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

示例1：将整个页面都变为黑白风格

html,body{
    filter: grayscale(100%);
}

示例2：将指定的图片设置为黑白风格

img.special {
    filter: grayscale(100%);
}

这样就可以实现对特定图片添加黑白效果。

注意事项：

1. 由于不同的浏览器支持情况可能有所差异，使用的时候需要加上各自浏览器的前缀，如上述示例中的webkit。

2. 注意不同属性值对灰度进度条的影响，100%就是完全转化为黑白，0%就是保持完全的原色，值在两端的变化效果是不明显的，建议在50%以上效果显著。

3. 灰阶滤镜是可以叠加的，所以可以根据需求进行叠加效果。

总之，CSS3中的灰阶滤镜功能十分强大，不仅能够快捷方便地实现黑白效果，同时它也可以应用到其他颜色的滤镜中，为网站制作提供更多的可能性。