<p class="zw">当给一个元素添加多个背景图像时,我们可以给每个图像应用不同的混合模式。每个图像和它下面的元素融合,最终与元素的背景色<code>background-color</code>融合。</p> <pre class="代码无行号"><code>.blend { background-color : #8c4549; background-image : url(blend-01.jpg), url(blend-02.jpg); background-blend-mode : lighten, multiply; }</code></pre> <p class="zw">在这个例子中,图片<code>blend-02.jpg</code>和<code>background-color</code>融合,采用<code>multiply</code>模式;图片<code>blend-01.jpg</code>与第二个图片融合,然后<code>background-color</code>用<code>lighten</code>模式。</p> <p class="zw">肯定还有更多的方式来使用<code>background-blend-mode</code>,而不只是混合单一的背景图像和颜色。设计师可以混合多个背景图像,以创造更加丰富和充满深度的设计,我很高兴看到这种新的属性能让我们创造更多的可能。</p>