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