CSS 如何实现图片对比滑块？

Question

CSS 如何实现图片对比滑块？

仓乃文 · Accepted Answer

图片对比滑块通过 resize 属性或 range input 控制两张图片的显示比例，实现前后对比效果。

```css
.comparison-slider {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
}

.comparison-slider .before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(after.jpg) center/cover;
}

.comparison-slider .after {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--position, 50%);
  height: 100%;
  background: url(before.jpg) center/cover;
  border-right: 2px solid #fff;
}

.comparison-slider input[type="range"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
}
```

补充说明：
- after 层通过 width 控制显示比例，border-right 作为分割线
- range input 透明覆盖在图片上，拖动控制 --position 变量
- 需配合少量 JS 更新 CSS 变量
- 适合修图前后对比、产品升级对比等场景