相互引导两个 div（一个用作背景图像）答案

【问题标题】：bootstrap two divs on each other (one used as background image)相互引导两个 div（一个用作背景图像）
【发布时间】：2014-12-26 22:12:49
【问题描述】：

您能否帮助我使用引导程序（或任何其他响应式 css 框架）完成类似的事情：div on div example

我想要一个容器，然后在一行中放置 2 个 div，一个 div 是背景图像（100% 宽度），另一个是顶部 div，实际上是另一个图像，我也想将动画应用于两个 div，背景图片需要在顶部 div 之后显示一点点。

到目前为止，我能够做这样的事情：

<div class="container-fluid">
<div class="row background-image">
<div class="col-md-6 col-md-offset-3 animation-1">
<img src="1.svg" style="width: 100%; height: auto;">
</div>
</div>
</div>

我使用 css 来添加这样的背景图片：

.background-image {background: black url("backgroundimage.svg") no-repeat;
                   background-position: center;
                   background-size:100% }

这样会很好地工作，但我“不能”将动画添加到我的 css 类 .background-image？所以它会在顶部 div 出现后显示

【问题讨论】：

我不明白，你的图片显示一行 3 个框，但你说你想要a container and then within a row 2 divs on top of each other...你能解释一下吗？
图像确实不是那么清晰，但是顶部 div 是一个 div，背景图像 div 是第二个 div（它是行的全宽），没有第三个 div :)。也许这张图片会更好地说明它imgur.com/u3LFUPY顶部div在中心。顶部 div 以引导偏移 3 为中心
好的，所以您唯一的问题是您要添加的动画？
是的，这种方法是我认为的唯一问题。我不知道如何将动画（css 淡入效果）添加到背景图像 div。否则，如果我不使用这种方法，我不知道如何使用 background-image div 作为顶部 div 下的背景
该背景图片需要空 alt 文本（即 alt=""）。见w3.org/TR/WCAG20-TECHS/H67

标签： html twitter-bootstrap

【解决方案1】：

您可以使用 jquery 和 setTimeout 做一些非常简单的事情：

setTimeout(function(){ //show image 1
  $(".background-img").animate({"opacity":"1"}); 
}, 1000);

setTimeout(function(){ //show image 2
  $(".background-top").animate({"opacity":"1"}); 
}, 1500);

FIDDLE

【讨论】：