html - PNG图片中透明切口后面的旋转木马

我认为这是一项简单的任务，但如果有问题，也许需要另一双眼睛。
我们有一个横幅图像，在右边是一个电脑显示器。“屏幕”已被剪切，因此横幅的部分是透明的（.PNG）。
我需要把旋转木马放在剪贴画后面，这样它就给人一种旋转木马在屏幕上“播放”的印象。
现在我正试图用Slick Carousel来实现这一点，但是如果有人推荐一个更好的旋转木马，它也是响应性的，我是开放的。
http://codepen.io/tconroy/pen/ZYRaRd
上面是我目前所拥有的代码笔——我遇到的主要问题是幻灯片位于图像内容的前面（与图像重叠），而幻灯片应该位于图像内容的后面（在横幅后面播放，通过屏幕上的透明“间隙”即可看到）。
我已经为幻灯片使用了占位符图像，但是这些是我们将要使用的每个图像的实际尺寸。图像应在幻灯片中“居中”，背景色可见。（基本上，图像被覆盖在彩色幻灯片上）。
HTML格式

<div class="inner-wrap">
  <header>
  <div class="contain-to-grid">
  <div class="inner-carousel-wrapper">
  <div class="inner-carousel">
    <div class="slide yellow">
      <img class="" src="http://lorempixel.com/350/347/sports" alt="">
    </div>
    <div class="slide purple">
      <img class="" src="http://lorempixel.com/416/347/abstract" alt="">
    </div>
    <div class="slide red">
      <img class="" src="http://lorempixel.com/381/346/city" alt="">
    </div>
    <div class="slide blue">
      <img class="" src="http://lorempixel.com/338/346/transport" alt="">
    </div>
    <div class="slide green">
      <img class="" src="http://lorempixel.com/343/347/nature" alt="">
    </div>
    <div class="slide orange">
      <img class="" src="http://lorempixel.com/361/347/cats" alt="">
    </div>
  </div> <!-- .inner-carousel -->
  <img src="http://i.imgur.com/HodKXD4.png">
</div> <!-- .inner-carousel-wrapper -->
  </div>
</header>
</div>
<section class="container">
  Notice how the "slides" above are overlapping the ipad square (bottom right of monitor)? The slides should appear "behind" the ipad.
</section>

SCSS系统

$lesson-blue:   #33B2E6;
$lesson-green:  #26B789;
$lesson-orange: #F58231;
$lesson-yellow: #FFD648;
$lesson-red:    #E43533;
$lesson-purple: #616373;

.inner-carousel-wrapper {
  background: black;
}

.inner-carousel {
  position: absolute;
  float: right;
  margin-left: 54.3%;
  margin-top: 6.0%;
  width: 45.7%;
  height: 76%;
}

.inner-carousel .slide {
  &.blue   {background: $lesson-blue; }
  &.green  {background: $lesson-green;}
  &.orange {background: $lesson-orange;}
  &.yellow {background: $lesson-yellow;}
  &.red    {background: $lesson-red;}
  &.purple   {background: $lesson-purple;}

  img {
    margin: 0 auto;
    padding: 6%;
    width: 60%;
  }
}

JS公司

$('.inner-carousel').slick({
      accessibility: false,
      autoplay:      true,
      autoplaySpeed: 2500,
      arrows:        false,
      draggable:     false,
      slide:         '.slide'
    });

最佳答案

我不确定这是否适合你，但是你可以给背景图像分配一个id，给它绝对的位置，然后改变它的z索引。这样的做法应该管用：
HTML格式

<img id="bg" src="http://i.imgur.com/HodKXD4.png">

CSS

#bg {position:absolute;z-index:2;}

http://codepen.io/anon/pen/ZYRaNE