<p class="zw">灰度<code>grayscale</code>滤镜逐步使用灰色来替换其他颜色。属性值从<code>0%</code>开始，起初保持元素不便，随着值达到<code>100%</code>，元素将彻底变为灰色。</p> <pre class="代码无行号"><code>.filter { filter : grayscale(100%); }</code></pre> <p class="图"><img alt="1704.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/201.jpg"></p> <p class="zw">而饱和度<code>saturate</code>滤镜可以使颜色混合保持完整和改变颜色的总数。饱和度滤镜的值和灰度滤镜不同：灰度<code>grayscale</code>值为<code>0%</code>时，元素保持不变，而饱和度<code>saturate</code>值为<code>0%</code>时，元素则看起来完全没有颜色。</p> <pre class="代码无行号"><code>.filter { filter : saturate(25%); }</code></pre> <p class="图"><img alt="1705.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/202.jpg"></p> <p class="zw"><code>100%</code>的饱和度将保持元素原来的样子，超过<code>100%</code>就会让饱和度过高。</p>
