Question

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

我能想到的唯一解决方案就是创建两个普通的白色div来叠加在一个div上，但这似乎是一种狡猾的方式。我不期待为我编写一大堆代码，也许只是解释它是否可行和参考，以便我可以学习。欢呼声。

Answer 1

根据@ cale_b的评论，您可以为div设置相同的背景，然后使用background-position属性来妄图后台共享。< / p>

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

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

#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>

Answer 2

据我了解，您只想使用一张图片的一张图片副本而不是两张div，而您不想使用任何叠加层。

所以你可以做到以下几点：
在底部 div上，使用background-position-y:-100px 或任何其他所需的值。这样就可以向上推动图像。

到目前为止，这看起来很有前景，但如果您正在制作响应式网页，则会遇到背景大小问题。我会说background-size:100% 100% div div会完成这项任务，但它会使图像拉伸（除非你真的响应）。

我仍然建议使用叠加层甚至是现成的图像。但是如果你坚持使用两个background-repeat:no-repeat，那么上面的步骤就足够了，你必须使你的设计适合这个图像。

N.B。请注意，您可能需要使用query()

获取两个div来共享一个背景图像

2 个答案: