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

在我的网页中，我有一个背景块，下面我有一个按钮，应该继续背景

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

我的代码结构类似于：

<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，并显示/隐藏

隐藏的内容
div

我的想法是将按钮背景设置为与内容背景相同的宽度和高度，然后将其放置在适当的位置。但是我有点不知所措，因为我找不到任何方法，也许你知道一个更好的方法。
假设你的图像占位符高度为100px，按钮高度为30px

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

然后，您需要一个130像素高的图像，其中背景位置设置为中上，按钮背景位置设置为中下

样品

.imgdiv {
    background-position: center top
}

.buttdiv {
    background-position: center bottom
}

如果您的按钮不在中间，您需要调整背景位置的“中心”部分，使其与主图像匹配
您最初的想法可能是最好的解决方案

使用背景位置来正确定位您的div

.button-content{
    background: url('') no-repeat 200 100%;
}

没有重复的数字是背景图像的X位置Y位置。
我找到了这个解决方案，希望它能帮助您

将绝对折叠按钮置于相对位置
#第1节


当将其放置为绝对时，它将只采用所需的宽度。然后我们使用伪类
：before
和
：after
用主体的背景色（在我的示例中为白色）填充左侧和右侧的空间

HTML如下所示（可使用rest代码展开）：

还有一个。
你能制作一个jsfiddle.net，让我们看看有什么问题吗。：）jycr：有一个大的图像显示出什么是错误的！；）我必须用JavaScript调整按钮的位置和背景大小。但它是有效的。
<div id="section-1">
    <div class="hidden-content">
        hidden content
    </div>
    <div class="button">
        Fold out
    </div>
</div>

#section-1 {
    min-height: 100px; /*use min-height so it will expand */
    background: url('pic.jpg');
    position: relative;
    padding-bottom: 30px; /* height of .button */
    overflow: hidden; /* to hide the :before and :after */
}
.button {
    position: absolute;
    bottom: 0;
    right: 20px;
    height: 30px;
    width: 75px;
    text-align: center;
}
.button:before, .button:after {
    content: ' ';
    background: white;
    position: absolute;
    width: 1000px;
    left: -1000px;
    height: 30px;
}
.button:after {
    left: 100%;
}
.hidden-content {
    display: none;
}