<p class="zw">不是所有的浏览器都支持<code>background-blend-mode</code>，但这显然不能阻止一个高明的设计师。某些情况下，因为浏览器不支持或者不全部支持，那我们需要考虑使用替代品。</p> <p class="zw">Modernizr工具的原理是，通过<code>class</code>属性值来为不同的浏览器环境定义不同的样式。这正是处理微软IE和Edge浏览器的好方法。当浏览器支持<code>background-blend-mode</code>时，Modernizr给HTML元素追加一个<code>backgroundblendmode</code>类。</p> <pre class="代码无行号"><code>.backgroundblendmode .blend { background-color : #8c4549; background-image : url(blend-01.jpg), url(blend-02.jpg); background-blend-mode : lighten, multiply; }</code></pre> <p class="zw">如果不支持，Modernizr通过追加<code>no-backgroundblendmode</code>类使我们可以提供一个替代图片。</p> <pre class="代码无行号"><code>.no-backgroundblendmode .blend { background-image : url(blend-alt.jpg); }</code></pre> <p class="zw">虽然Modernizr很有用，但它还只是一个很粗糙的工具，因为它只能检测浏览器支持的CSS属性，而不能检测是否支持每一个属性值。例如，苹果的Safari支持部分<code>background-blend-mode</code>, 因为它不支持<code>color</code>、<code>hue</code>、<code>luminosity</code>和<code>saturate</code> 混合模式。苹果的浏览器已经实现了我们之前学过的<code>@supports</code>功能查询，@规则是一个解决部分支持的理想方案。</p> <p class="zw">我们将若干特征查询链到一起，首先测试<code>color</code>，然后是<code>hue</code>、<code>luminosity</code>，最后测试<code>saturate</code>。我们将使用<code>not</code>运算符来指定缺乏支持这些特定的属性和值的浏览器，用<code>or</code>运算符，以确保涵盖了几种可能不支持的混合类型。</p> <pre class="代码无行号"><code>@supports not (background-blend-mode:color) or not (background-blend-mode:hue) or not (background-blend-mode:luminosity) or not (background-blend-mode:saturate) { .blend { background-image : url(blend-alt.jpg); } }</code></pre>
