text.html 1005 字节
Newer Older
ToTensor's avatar
ToTensor 已提交
1 2 3 4 5 6 7 8
 
<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>