<p class="zw">CSS有16种混合模式：<code>normal</code> （没有混合应用）、<code>color</code>、<code>color-dodge</code>、<code>color-burn</code>、<code>difference</code>、<code>exclusion</code>、<code>hue</code>、<code>luminosity</code>、<code>multiply</code>、<code>overlay</code>、<code>saturate</code> 、<code>screen</code>、<code>lighten</code> 、<code>darken</code>、<code>hard-light</code> 和 <code>soft-light</code>。</p> <p class="zw"><code>background-image</code>和<code>background-color</code>通过我们选择各种混合模式来形成不同的视觉效果。</p> <p class="图"><img alt="1713.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/210.jpg"></p> <p class="zw"><code>multiply</code>：将<code>background-image</code>和<code>background- color</code>叠加到一起，可以得到一个颜色更深的<code>background-image</code>。</p> <p class="图"><img alt="1714.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/211.jpg"></p> <p class="zw"><code>exclusion</code>：衡量源和目标的亮度，减去亮度更大的区域的色彩。它和<code>difference</code>相似，不同之处在于它会得到对比度较低的效果。</p> <p class="图"><img alt="1715.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/212.jpg"></p> <p class="zw"><code>lighten</code>：这个模式与<code>darken</code>相反，它的效果取决于源和背景颜色之间更浅的（色彩）。即将两像素的RGB值进行比较后，取高值成为混合后的颜色，因而总的颜色灰度级升高，造成变亮的效果。</p> <p class="图"><img alt="1716.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/213.jpg"></p> <p class="zw"><code>overlay</code>：这是一个复杂的混合模式，通过对目标颜色叠加复合或过滤，使亮的颜色变得更亮，暗的颜色变得更暗。</p> <p class="图"><img alt="1717.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/214.jpg"></p> <p class="zw"><code>saturate</code>：通过组合源颜色的饱和度，目标颜色的色相和亮度产生的效果。<code>saturate</code>类似于<code>hue</code>，但是它使用可选择的属性。</p> <p class="图"><img alt="1718.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/215.jpg"></p> <p class="zw"><code>color-dodge</code>：提亮目标颜色来反映源颜色。</p>
