Question

你能帮助我用bootstrap（或任何其他响应式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% }

所以这样可以很好地工作，但是我可以＆＃34;＆＃34;＃34;将动画添加到我的css类.background-image？所以它会在top div显示之后显示

Answer 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

bootstrap彼此两个div（一个用作背景图像）

1 个答案: