<p class="zw">为了获得更有趣的创意效果，我们可以将两个或多个滤镜组合应用。这些组合的语法有点出乎意料，不要以为用逗号隔开滤镜列表就行了。在下面的例子中，我们会组合亮度<code>brightness</code>、对比度<code>contrast</code>和饱和度<code>saturate</code>滤镜，得到老照片的复古效果。组合滤镜的语法如下。</p> <pre class="代码无行号"><code>.filter { filter : brightness(1.25) contrast(.75) saturate(40%); }</code></pre> <p class="zw">滤镜的顺序很重要，它是从左到右执行的。在上面的例子中，先是将元素亮度增加到<code>125%</code>，然后将对比度减少到<code>75%</code>，将这两种滤镜效果组合后，又把饱和度降低到了<code>40%</code>。</p> <p class="zw">在为使用了滤镜效果的元素设置<code>:active</code>、<code>:focus</code>和<code>:hover</code>状态时，必须为每个状态再重复设置一遍各个属性。例如，我们可能想要调整前面例子中鼠标悬停时的饱和度，同时保持亮度和对比度不变。</p> <pre class="代码无行号"><code>.filter { filter : brightness(1.25) contrast(.75) saturate(40%); } .filter:hover { filter : saturate(10%); }</code></pre> <p class="zw">注意！我们在定义<code>:hover</code>状态时删除了元素的亮度和对比度设置。为了保持该状态的所有滤镜属性，我们必须重复设置各个值。</p>
