html - 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