Javascript 让两个div共享一个背景图像

因此，我试图得到两个单独的div，它们非常接近共享一个背景图像，但我不确定这是否可行。我上传了两张图片，第二张是为更小的屏幕设计的（只是为了进一步解释我的意思）。我无法想象两个独立的背景图像会起作用，因为它们在调整窗口大小时不会对齐

---

我能想到的唯一解决办法是创建两个纯白色div来覆盖在一个div上，但这似乎是一种不可靠的方法。我不希望有大量的代码为我编写，也许只是解释一下，如果可能的话，并提供一个参考，这样我就可以学习了。干杯。

根据@cale_b的评论，您可以将相同的背景设置为两个

div

，然后使用

background position

属性来实现背景共享的错觉

然后，您可以使用媒体查询使其在移动设备中看起来也不错

这里有一个简单的示例，看起来像您发布的示例：

#包装器{
宽度：800px；
字体系列：无衬线；
}
#顶{
高度：200px；
边缘底部：20px；
背景图像：url（“https://placekitten.com/800/400");
背景位置：0；
线高：150px；
颜色：#FFF；
字体大小：32px；
文本缩进：50px；
}
#底部{
宽度：500px；
高度：100px；
背景图像：url（“https://placekitten.com/800/400");
背景位置：0-220px；
}
#底部ul{
列表样式：无；
}
#李国宝{
显示：内联块；
列表样式：无；
填充：0 10px；
线高：50px；
颜色：#000；
字体大小：24px；
}

我是一面旗帜

我是
a
菜单

据我所知，您只想在两个

div

上使用一个图像的一个图像副本，而不想使用任何覆盖

因此，您可以执行以下操作：
在底部

div

上，使用

背景位置-y:-100px

或任何其他所需值。这样可以向上推图像

到目前为止，这看起来很有希望，但您将面临背景大小的问题，特别是当您制作响应性网页时。 我想说

背景大小：100%100%

对于这两个

div

都可以，但它会使图像拉伸（除非你真的响应性）

我仍然建议使用覆盖层，甚至是现成的图像。但是，如果您坚持使用两个

div

，那么上述步骤应该足够了，同时您必须使您的设计适合此图像

---

注意：请记住，您可能需要使用

背景重复：无重复

您的问题的解决方案实际上很简单，并且位于图像的

背景位置

。将背景图像设置为相同，但根据要显示的部分，将背景位置设置为不同。@cale\u b请将您的答案作为答案而不是注释发布。。另一个“解决方案”是将两个div包装在另一个div中，并将背景图像赋予此包装div。@joaqínO-我不会。原因有二:一,。问题中没有足够的信息来做好工作。2.这很简单，我宁愿让其他有兴趣赢得销售代表的人来做。非常感谢各位：）。。。我也会考虑你的建议杰夫。谢谢你的意见：）