Css 如何将多个div与背景图像对齐

我有一个非常大的图像用作背景图像。由于图像太大，我将其分为三个图像，可以一个叠在另一个上

我将这些图像作为背景图像与财产封面放在一起：

<div class="screen" id="header1"></div>
<div class="screen" id="header2"></div>
<div class="screen" id="header3"></div> 

问题是背景图像中的图案没有对齐

---

无论屏幕有多宽，如何使多个背景图像对齐？

所以。。。这里面有一些事情：

第一个问题：您没有做任何事情使div在CSS中重叠，因此它们将在浏览器的文档流中一个接一个地出现。例如，查看此小提琴：

如果您希望它们完全重叠，也就是叠加，那么它们需要绝对位于彼此之上，如下所示：

div:first-child {
    background: red;
}

div {
    background: green;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

div:last-child {
    background: blue;
}

另一个问题是，为什么要将一个大背景图像分解为3个较小的图像。我们称之为图像切片，这实际上不是最佳的。检索该图像需要3个http请求，而不是一个，这比经常获取较小的http请求开销更大。此外，它是一个背景图像，因此它不会像内联图像那样，在图像加载之前阻止文档完全加载

---

希望这有帮助。

你能添加一个吗？我不能显示尚未公开的图像…如果没有公开，也许可以制作一个示例图像并重复这个过程，这样我们就可以玩弄代码了？当你把浏览器窗口拉得更大或更小时，有时图案会对齐，有时不会。我不希望它们重叠。我想让他们排成一行，不管窗户大小。由于文件太大，我已将背景图像分为三个图像。请尝试设置bg图像，使它们的宽度和高度都相同。目前，您的高度不同，并且您的背景大小设置为“覆盖”，这意味着您的图像将调整大小以完全覆盖容器，而不是空白。这样做效果更好，但当我将浏览器窗口的大小设置为大于1765px时，图像宽度会扩大，但高度不会扩大，如果你的三张图片现在都是相同的宽度和高度，那么通过使用封面的背景尺寸，它们应该以相同的方式对齐和调整大小。这不是你在这里看到的吗？对。超过一定宽度时，它们不会对齐。

div:first-child {
    background: red;
}
div {
    background: green;
    width: 100%;
    height: 100%;
}
div:last-child {
    background: blue;
}

div:first-child {
    background: red;
}

div {
    background: green;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

div:last-child {
    background: blue;
}