认识CSS的background（七）

这一讲我们来讨论多背景图像的应用。我们先来看看如何在元素上布置多个背景图图像，比如三个背景图像，以及怎样设置它们：

代码中可以看到，图片地址用 CSS 函数 url('图片地址') 封装，每一个url() 是一个背景图片的表述单位，中间用小角逗号隔开；其余相应的 background-* 属性也是用小角逗号隔开彼此的属性值，但要注意，同一个属性的双属性值是用空格隔开的。当图片地址真实有效，则效果应大致如下所示：

上述演示，所用图片都是小图片，且彼此拉开了足够的距离，相互之间没有互相覆盖，因此三个背景图片都能完整看到。如果背景图片之间在元素平面上有重合，则重合的部分只能显示其中的一个，规则是老大优先，上面例子中最先写出来的 url('图片1') 是老大。下面的演示，第一张背景图片和第二张背景图片中间部分有交合，重合的部分中只能看到第一张图片的内容，第二张图片重合的部分被第一张遮挡了看不到这一部分画面：

多背景图像重叠技术现在被广泛使用，把握得好可以营造出一些特别的效果。同样是第二个示例的两只小鸟，我们让它以no-repeat、cover的方式完全地重叠在元素之上，然后利用 background-blend-mode 混合滤镜属性的 darken 属性值将它们融合在一起。看看效果如何：

结果令人惊叹，酷得不要不要的。当然也有不如意之处，融合滤镜要用得好，需要合适的图片和恰当的属性值以及丰富的操作经验，而这些都需要多加尝试。核心代码如下：

更多的多重背景设置技巧我们将在下一节继续探讨，敬请期待。