有没有办法在可折叠的div及其父文件夹中传播一张图片？

在这JSFiddle，我有一个在后台有一个图像的按钮。如果您单击该按钮，则会从底部弹出一个折叠柱。有没有办法在可折叠的div及其父文件夹中传播一张图片？

我正在做的是有相同的背景图像动态重新调整大小，以适应整个 un-collapsed 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; 
}

来源

2016-03-07 8protons

你不需要任何JavaScript，而移动的背景，conatining <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; 
}

一旦您完成后，将图像复制到自己的服务器用于生产用途，而不是引用到维基共享资源之一。

来源

2016-03-07 23:26:11

这很好，谢谢。 – 8protons

不客气:) –

或者，就像我怀疑，我不能有一个形象的跨越多个div的

你可以有你的形象一样大，只要你想。您只需通过更改style.width和style.height属性来告诉它它应该有多大。（或背景大小在你的情况下）这是我会做的JS。

但是你要自动做到这一点 - 所以我会的背景图像附加到你更大的容器.panel默认

但随后，该按钮在它前面的，所以你就必须改变背景颜色等他们...

来源

2016-03-07 23:35:21 Hutzlibu

有没有办法在可折叠的div及其父文件夹中传播一张图片？

回答

相关问题