让两个div共享一个背景图片

Question

所以我试图让两个靠近的独立div共享一个背景图片，但我不确定这是否可能。我上传了两张图片，第二张是为较小屏幕设计的（只是为了进一步解释我的意思）http://imgur.com/a/2dypd。我无法想象两个单独的背景图片会起作用，因为当调整窗口大小时它们不会对齐。

我唯一能想到的解决方法是创建两个纯白色的div覆盖在一个单独的div上，但那似乎是一个不良的方式。我并不指望有人为我编写代码，只是想知道是否可能以及参考资料，让我可以学习。谢谢。

- ccc

---

你的问题的解决方案其实很简单，而且在于图像的 background-position。将背景图片设置为相同的，但是根据要显示的部分设置不同的 background-position。 - random_user_name

@cale_b 请以答案的形式发布您的回答，而不是评论。 - Joaquín O

另一个“解决方案”是将两个div都包装在另一个div中，并将此包装器div设置为背景图像。 - user2417483

@JoaquínO - 我不会这样做。原因有两个：1.问题中的信息不够充分，难以做出好的回答。2.这个问题很简单，我宁愿让其他有兴趣赚取声望值的人来回答。 - random_user_name

非常感谢大家 :) ... 我也会尝试一下 Jeff 的建议。 - ccc

@jeff，你能否给我展示一个如何做到这一点的例子？我喜欢他们的答案，但我觉得你的方法会取得更好的结果。 - ccc

Answer 1

根据@cale_b的评论，您可以将相同的背景设置为两个div，然后使用background-position属性来实现背景共享。

然后，您可以使用媒体查询使其在移动设备上看起来很好。

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

#wrapper {
  width: 800px;
  font-family: sans-serif;
}

#top {
  height: 200px;
  margin-bottom: 20px;
  background-image: url("https://placekitten.com/800/400");
  background-position: 0 0;
  line-height: 150px;
  color: #FFF;
  font-size: 32px;
  text-indent: 50px;
}

#bottom {
  width: 500px;
  height: 100px;
  background-image: url("https://placekitten.com/800/400");
  background-position: 0 -220px;
}

#bottom ul {
  list-style: none;
}

#bottom ul li {
  display: inline-block;
  list-style: none;
  padding: 0 10px;
  line-height: 50px;
  color: #000;
  font-size: 24px;
}

<div id="wrapper">
  <div id="top">
    I'm a banner
  </div>
  <div id="bottom">
    <ul>
      <li>I'm</li>
      <li>a</li>
      <li>menu</li>
    </ul>
  </div>
</div>

- Joaquín O

Answer 2

据我所知，您想在两个

上仅使用一张图像副本，并且不想使用任何重叠。因此，您可以执行以下操作：
在底部

上，使用background-position-y：-100px或任何其他所需的值。这样，您就可以将图像向上推移。
到目前为止，这看起来很有前途，但如果您正在制作响应式网页，则会遇到背景大小的问题。我建议对于两个

都使用background-size：100% 100%，但这样会使图像拉伸（除非您确实做到了真正的响应式）。
我仍然建议使用覆盖层甚至准备好的图像。但是，如果您坚持使用两个

，则上述步骤就足够了，同时您必须使设计适合该图像。
请注意，您可能需要使用background-repeat：no-repeat。

- Qaddura

---

谢谢您的输入 :) - ccc