Question

在这个JSFiddle中，我有一个背景中有图像的按钮。如果单击该按钮，折叠的列将从底部弹出。

我想要做的是让相同的背景图像动态调整大小以适应整个未折叠的div一旦它解除崩溃。现在，我明白我可以做一个像

这样的电话

$(this).addClass('imageUpdate');

当我想动态更改标题/按钮div的CSS时，但这不是我想要做的;我希望图像调整大小，但也要在整个展开的列（以及从中下拉的标题）中映射自身。

有什么方法可以解决这个问题吗？或者，正如我怀疑的那样，我可以在多个div中没有图像跨度吗？如果是这种情况，为了实现我的目标，您会推荐哪种替代方案？谢谢！

HTML

<div class="col-md-3" id="left-accordion">
  <!-- first set of buttons -->
  <div class="panel panel-default">
    <div class="panel-heading" role="button" data-toggle="collapse"  data-target="#baselayer">CLICK ME<br/>
      <span style="font-size:1.25em;color:#fff;" class="glyphicon"></span>
    </div>

    <div class="collapse" id="baselayer">

      <div class="well selections base-buttons" id="softbutton" role="button">Bulbasaur<br/>
        <div class="selected">

        </div>
      </div>

      <div class="well selections base-buttons" id="medbutton" role="button">Charmander<br/>
        <div class="selected">

        </div>
      </div>

      <div class="well selections base-buttons" id="firmbutton" role="button">Squirtle<br/>
        <div class="selected">

        </div>
      </div>

    </div>
  </div>
</div>

CSS

.panel-default > .panel-heading {
    color: #fff;
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/English_Pok%C3%A9mon_logo.svg/2000px-English_Pok%C3%A9mon_logo.svg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 110%;
    border: none;
}

Answer 1

您不需要任何JavaScript，但可以将背景移动到内容<div class="panel-default">。然后你删除上面元素的背景，你很好。

Example

CSS：

.panel-default > .panel-heading {
    color: red;
    background: transparent;
}
.panel-default .well{
    background: transparent;
}
.panel-default {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/English_Pok%C3%A9mon_logo.svg/2000px-English_Pok%C3%A9mon_logo.svg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 110%;
    border: none;
}

完成后，将图像复制到您自己的服务器以供生产使用，而不是引用维基媒体上的图像。

Answer 2

或者，正如我怀疑的那样，我可以在多个div之间没有图像

您可以根据需要放大图像。您只需通过更改style.width和style.height属性来告诉它，它应该有多大。（或你的背景大小）这就是我要做的.J。

但是你想自动完成 - 所以我会将background-Image附加到你更大的容器.panel-default

但是，按钮就在它的前面，所以你必须改变它们的背景颜色......

有没有办法在可折叠的div及其父div上传播一个图像？

2 个答案: