text.html 1.0 KB
Newer Older
ToTensor's avatar
ToTensor 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14
 
<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>