<p class="zw">如果一个元素包含多个背景图片,我们可以将相同的混合模式分配给所有的元素,如下所示。</p> <pre class="代码无行号"><code>.blend { background-image : url(blend-01.jpg), url(blend-02.jpg), url(blend-03.jpg); mix-blend-mode : multiply; }</code></pre> <p class="zw">或者我们可以为每个<code>background-image</code>指定不同的混合类型。</p> <pre class="代码无行号"><code>.blend { background-image : url(blend-01.jpg), url(blend-02.jpg), url(blend-03.jpg); mix-blend-mode : multiply, screen, luminosity; }</code></pre> <p class="zw">在这个例子中,图片<code>blend-01.jpg</code>将使用<code>multiply</code>混合模式,图片<code>blend-02.jpg</code>将使用<code>screen</code>,以此类推。因此,我们需要注意背景图片和它们对应的混合模式的顺序。</p> <p class="zw"><code>mix-blend-mode</code>属性和<code>back-ground-blend-mode</code>使用相同的混合类型,所以我们可以使用它们实现相同的混合效果。</p>