请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
这一讲我们来讨论多背景图像的应用。我们先来看看如何在元素上布置多个背景图图像，比如三个背景图像，以及怎样设置它们：
/* 设定三个背景图像 */
background-image: url('图片1'), url('图片2'), url('图片3');
/* 设定图像的重复模式 ：单值表示三个图像统一设置 */
background-repeat: no-repeat;
/* 设置图片位置 ：每一个值若设定单值，表示垂直方向居中 */
background-position: 0 0, center, 100% 100%;
/* 设置图片尺寸 ：使用图像的原始大小时可以省略；每一个值可以设置宽、高 */
background-size: auto, auto, auto;
/* 上面的代码可以使用 background 简写属性实现 ：代码更简洁
如果需要定义 background-size，以图片1为例，可以写成：
background: url('图片1') no-repeat 0 0 / 85px 90px, ...., ...;
*/
background: url('图片1') no-repeat 0 0, url('图片2') no-repeat center, url('图片3') no-repeat 100% 100%;
代码中可以看到，图片地址用 CSS 函数 url('图片地址') 封装，每一个url() 是一个背景图片的表述单位，中间用小角逗号隔开；其余相应的 background-* 属性也是用小角逗号隔开彼此的属性值，但要注意，同一个属性的双属性值是用空格隔开的。当图片地址真实有效，则效果应大致如下所示：
上述演示，所用图片都是小图片，且彼此拉开了足够的距离，相互之间没有互相覆盖，因此三个背景图片都能完整看到。如果背景图片之间在元素平面上有重合，则重合的部分只能显示其中的一个，规则是老大优先，上面例子中最先写出来的 url('图片1') 是老大。下面的演示，第一张背景图片和第二张背景图片中间部分有交合，重合的部分中只能看到第一张图片的内容，第二张图片重合的部分被第一张遮挡了看不到这一部分画面：
多背景图像重叠技术现在被广泛使用，把握得好可以营造出一些特别的效果。同样是第二个示例的两只小鸟，我们让它以no-repeat、cover的方式完全地重叠在元素之上，然后利用 background-blend-mode 混合滤镜属性的 darken 属性值将它们融合在一起。看看效果如何：
结果令人惊叹，酷得不要不要的。当然也有不如意之处，融合滤镜要用得好，需要合适的图片和恰当的属性值以及丰富的操作经验，而这些都需要多加尝试。核心代码如下：
background-image:
url('https://638183.freep.cn/638183/Pic/10.jpg'),
url('https://638183.freep.cn/638183/Pic/3.jpg');
background-repeat: no-repeat;
background-size: cover;
background-blend-mode: darken;
更多的多重背景设置技巧我们将在下一节继续探讨，敬请期待。
| 
发表于 2024-3-14 12:31
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2024-3-14 12:46
楼主
