javascript - 如何在另一个 div/span 上继续一个 div 的背景？

Question

在我的网页中，我有一个带有背景的 block ，在下面我有一个按钮，该按钮应该延续背景。

这是一个例子。左图是我的网页现在的样子，右图是网页应该的样子。您可以看到按钮上的背景继续。

我的代码结构是这样的:

<div id="section-1">
  <div class="shown-content">
    <div class="background"></div>
    <div class="content">
      ... here are shown contents ...
    </div>
  </div>

  <div class="hidden-content">
    ... here are hidden contents ...
  </div>

  <div class="button-content">
    <span class="button">FOLD OUT</span>
  </div>
</div>

功能是当您单击按钮时，它会触发 JQuery slideToggle它显示/隐藏 hidden-content div。

我的想法是将按钮背景设置为与内容背景相同的宽度和高度，然后将其放置在适当的位置。但我有点迷茫，因为我没有找到任何方法，也许你知道更好的方法。

Answer 1

假设您的图片占位符高度为 100 像素，按钮高度为 30 像素。

假设您的按钮始终位于主图像 div 的中心。

那么您需要一张 130 像素高的图片，其中背景位置设置为顶部居中，按钮背景位置设置为底部居中。

示例

.imgdiv {
    background-position: center top
}

.buttdiv {
    background-position: center bottom
}

如果您的按钮不在中心，您需要调整背景位置的“中心”部分以使其与主图像匹配