PNG图像中透明切口后面的旋转木马

Question

我认为遇到问题是一项简单的任务，也许只需要另一双眼睛。

我们有横幅图片，右侧是电脑显示器。 "screen" 已被剪掉，因此横幅的一部分是透明的 (.PNG)。

我需要在剪切图像后面放置一个旋转木马，这样它给人的印象是旋转木马在屏幕上"playing"。

现在我正在尝试使用 Slick Carousel 来实现这一点，但如果其他人有更好的轮播推荐，我愿意接受。

http://codepen.io/tconroy/pen/ZYRaRd

以上是我目前所拥有的代码笔——我遇到的主要问题是幻灯片在图像内容的前面（重叠图像），当它应该在图像内容的后面（播放在横幅后面，通过屏幕中的透明 "gap" 可见。

我为幻灯片使用了占位符图像，但这些是我们将使用的每张图像的实际尺寸。幻灯片中的图片应为 "centered"，背景颜色可见。（基本上图像被叠加到彩色幻灯片上）。

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

几件事一起解决这个问题：

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

Demo

您需要稍微调整一下 sizing/position，但它应该可以正常工作。

Answer 2

我不确定这是否适合您，但您可以为背景图像指定一个 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

PNG图像中透明切口后面的旋转木马

Carousel behind transparent cutout in PNG image

html

css

zurb-foundation

banner

slick.js