在PNG图像中透明保险开关后面的旋转木马

Question

我所假设的问题将是一项简单的任务，可能只需要另一组眼睛。

我们有横幅图片，右侧是电脑显示器。 “屏幕”已被剪切掉，以便横幅的一部分是透明的（.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'
    });

Answer 1

我不确定这是否适合你，但你可以为你的背景图像分配一个id，给它绝对定位，然后改变它的z-index。这样的事情应该有效：

HTML

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

CSS

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

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

Answer 2

有几件事情可以解决这个问题：

.contain-to-grid {
    /* background: #333; */
}
.inner-carousel-wrapper {
    /* background: black; */
}
.inner-carousel {
    z-index: -1;
}

<强> Demo

您需要稍微调整一下尺寸/位置，但它应该起作用。