css - 如何在滑动器上覆盖透明图像并仍然能够滑动？

Question

我有一个透明背景的 iPad 图片，所以滑动图片就在里面。

代码笔 here .

我遇到的问题是，当我在 swiper-container div 的外部 放置 iPad 图像时，它看起来不错，但我无法再点击滑动器中的图像以移动/滑动它们..

   <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 图像放在内部 swiper-container div 时，效果很好，但它不会像我需要的那样与图像重叠。 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; 将允许滑动图像