<p class="zw">在CSS盒模型中，元素的背景色在背景图片之下，边框在它们之上。或许你可以从名字猜出，<code>background-blend-mode</code>将一个元素的背景色和图片混合在一起。当一个元素只有单一背景图片，<code>background-blend-mode</code>控制背景图如何与它后面的背景颜色融合。</p> <p class="zw">要应用混合背景，在<code>background-blend-mode</code>后面设置混合类型值，在这个实例中使用<code>lighten</code>。</p> <pre class="代码无行号"><code>.blend { background-color : #8c4549; background-image : url(blend-01.jpg); background-blend-mode : lighten; }</code></pre> <p class="图"><img alt="1712.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/209.jpg"></p> <p class="图题">左边为<code>normal</code>，右边为<code>lighten</code>。</p>
