如何裁剪图片适配网格单元格，实现透明背景图片对比滑块？

云上老周

2026-8-5

透明图片对比滑块解决方案

你用CSS Grid分两列的思路不适用透明图片，因为透明区域会直接透出另一列的内容，没法实现覆盖效果。正确的做法是让两张图片完全重叠，再通过裁剪其中一张来实现对比。

实现方案

用相对定位的容器包裹两张图片，让它们完全重叠
给上层图片设置裁剪规则，通过滑块动态调整裁剪区域
透明滑块覆盖整个容器，提升拖动体验

完整代码示例

<div class="image-comparison">
  <img src="胖猫.png" alt="胖猫" class="comparison-img top-img">
  <img src="瘦猫.png" alt="瘦猫" class="comparison-img bottom-img">
  <input type="range" min="0" max="100" value="50" class="slider" id="comparison-slider">
</div>

.image-comparison {
  position: relative;
  max-width: 592px;
  margin: 0 auto;
  overflow: hidden;
}

.comparison-img {
  width: 100%;
  height: auto;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.top-img {
  z-index: 2;
  clip-path: inset(0 50% 0 0); /* 默认显示左半部分 */
}

.bottom-img {
  z-index: 1;
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  z-index: 3;
}

const slider = document.getElementById('comparison-slider');
const topImg = document.querySelector('.top-img');

slider.addEventListener('input', function() {
  const percentage = this.value;
  topImg.style.clipPath = `inset(0 ${100 - percentage}% 0 0)`;
});