如何使用css3实现一个div设置多张背景图片？

在 CSS3 中，可以使用 background-image 属性结合逗号分隔来为一个 div 设置多张背景图片。 每张图片还可以分别设置位置、大小、重复方式等。

div {
  width: 500px;
  height: 300px;
  background-image: 
    url("image1.jpg"), 
    url("image2.png"), 
    url("image3.svg");
  background-repeat: no-repeat, repeat-x, repeat;
  background-position: 
    top left,
    center bottom,
    right 10px bottom 20px;
  background-size: 
    200px 150px,
    auto 50px,
    contain;
}

解释：

• background-image: 使用逗号分隔列出多个图片 URL。顺序很重要，先列出的图片在最底层，后列出的图片在最顶层。
• background-repeat: 控制每张图片的重复方式。同样使用逗号分隔，与 background-image 中的图片顺序对应。常用的值有：no-repeat（不重复）、repeat（水平和垂直重复）、repeat-x（水平重复）、repeat-y（垂直重复）、space (通过调整图片之间的间距来重复图片，图片本身不缩放)、round (通过缩放图片来重复图片，图片会变形)。
• background-position: 设置每张图片的位置。可以使用关键词如 top, bottom, left, right, center，也可以使用具体的像素值或百分比。
• background-size: 设置每张图片的大小。 可以使用关键词 cover（覆盖整个容器，图片可能会被裁剪）、contain（包含在容器内，图片可能会留白）、或者使用具体的像素值或百分比。auto 表示图片的原始大小。

示例解析：

上面的代码会为 div 设置三张背景图片：

1. image1.jpg：位于左上角，大小为 200px 宽，150px 高，不重复。
2. image2.png：位于底部中央，高度为 50px，宽度自动调整，水平重复。
3. image3.svg：位于右下角，距离右边 10px，距离底部 20px，大小设置为 contain，即完整包含在容器内，水平和垂直重复。

注意事项：

• 图片路径要正确，可以使用相对路径或绝对路径。
• 属性值的个数要与图片个数对应，否则可能会导致样式错乱。
• background-size 的 cover 和 contain 关键词非常实用，可以根据需要选择。
• 可以使用简写属性 background 来同时设置多个背景属性，但为了代码清晰易懂，建议分开写。

希望这个解释能够帮助你理解如何使用 CSS3 为 div 设置多张背景图片.