我如何在刷卡上覆盖透明图像，并且仍然可以滑动

Question

我有一个带有透明背景的iPad图像，因此swiper映像在其中。

codepen在这里。

我遇到的问题是，当我拥有iPad image 外部 swiper-containerdiv的外部时，它看起来很棒，但是我无法单击刀刀中的图像以移动/滑动他们..

   <div class="swiper-container image-slider">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="https://unsplash.it/300/400/?random" />
        </div>
        <div class="swiper-slide">
          <img src="https://unsplash.it/300/420/?random" />
        </div>
        <div class="swiper-slide">
          <img src="https://unsplash.it/300/410/?random" />
        </div>
      </div>
    </div>
    <img class="ipad-frame" src="https://www.dropbox.com/s/2ehll1khqxw7nxl/ipad_isolated_no_bg.png?raw=1" />
  </div>

当我将其放置时，iPad image swiper-containerdiv效果很好，但是它不会像我需要的那样重叠图像。swiper-container庄稼。

<div class="swiper-container image-slider">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="https://unsplash.it/300/400/?random" />
    </div>
    <div class="swiper-slide">
      <img src="https://unsplash.it/300/420/?random" />
    </div>
    <div class="swiper-slide">
      <img src="https://unsplash.it/300/410/?random" />
    </div>
  </div>
  <img class="ipad-frame" src="https://www.dropbox.com/s/2ehll1khqxw7nxl/ipad_isolated_no_bg.png?raw=1" />
</div>

关于如何用iPad透明背景包裹image-slider的任何想法，同时仍能刷新图像？

Answer 1

为.ipad-frame添加pointer-events: none;将允许滑动图像