不是所有的浏览器都支持background-blend-mode，但这显然不能阻止一个高明的设计师。某些情况下，因为浏览器不支持或者不全部支持，那我们需要考虑使用替代品。

Modernizr工具的原理是，通过class属性值来为不同的浏览器环境定义不同的样式。这正是处理微软IE和Edge浏览器的好方法。当浏览器支持background-blend-mode时，Modernizr给HTML元素追加一个backgroundblendmode类。

.backgroundblendmode .blend { 
background-color : #8c4549; 
background-image : url(blend-01.jpg), url(blend-02.jpg); 
background-blend-mode : lighten, multiply; }

如果不支持，Modernizr通过追加no-backgroundblendmode类使我们可以提供一个替代图片。

.no-backgroundblendmode .blend { 
background-image : url(blend-alt.jpg); }

虽然Modernizr很有用，但它还只是一个很粗糙的工具，因为它只能检测浏览器支持的CSS属性，而不能检测是否支持每一个属性值。例如，苹果的Safari支持部分background-blend-mode, 因为它不支持color、hue、luminosity和saturate 混合模式。苹果的浏览器已经实现了我们之前学过的@supports功能查询，@规则是一个解决部分支持的理想方案。

我们将若干特征查询链到一起，首先测试color，然后是hue、luminosity，最后测试saturate。我们将使用not运算符来指定缺乏支持这些特定的属性和值的浏览器，用or运算符，以确保涵盖了几种可能不支持的混合类型。

@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); } 
}