当给一个元素添加多个背景图像时,我们可以给每个图像应用不同的混合模式。每个图像和它下面的元素融合,最终与元素的背景色background-color融合。

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

在这个例子中,图片blend-02.jpgbackground-color融合,采用multiply模式;图片blend-01.jpg与第二个图片融合,然后background-colorlighten模式。

肯定还有更多的方式来使用background-blend-mode,而不只是混合单一的背景图像和颜色。设计师可以混合多个背景图像,以创造更加丰富和充满深度的设计,我很高兴看到这种新的属性能让我们创造更多的可能。