HTML + CSS 创建图片倒影的 5 种方法

HTML + CSS 创建图片倒影的 5 种方法

目标：掌握多种生成“图片倒影 / Reflection”效果的实现思路，理解兼容性、性能差异与最佳实践，方便在真实业务（商品展示、相册、登陆页面视觉强化）中安全使用。

---

总览对比

方法	核心技术	代码量	兼容性	动态内容适配	可控性	适用场景
1. -webkit-box-reflect	私有 CSS 属性	最少	仅 WebKit (Chrome / Safari / Edge)	自动	中	快速 Demo / 营销页
2. 伪元素 + transform: scaleY(-1)	标准 CSS	少	所有现代浏览器	良好	高（可自定义遮罩）	通用首选
3. 伪元素 + mask-image / -webkit-mask	CSS Mask	中	Safari / Chromium (Firefox 部分实验)	良好	很高（渐隐更自然）	高端展示
4. SVG 复制 + 渐变遮罩	内联 SVG	中	全面 (IE 除外)	良好	很高（滤镜/形变）	复杂视觉 / 批量渲染
5. Canvas 二次绘制	<canvas>	高	全面	需手动重绘	最高（像素级）	动态生成 / 后处理

选择建议：

1. 追求最少代码 & 不顾部分浏览器：用 1。
2. 需要兼容性 + 易维护：用 2。
3. 想要柔和渐隐过渡、无多余 DOM：用 3。
4. 大型可视化 / 复杂滤镜链：用 4。
5. 需要最终导出合成图 / 动态内容（如生成分享海报）：用 5。

---

方法一：-webkit-box-reflect（最简单 / 兼容性受限）

<style>.reflect-webkit {width: 240px;-webkit-box-reflect: below 6px linear-gradient(to bottom, rgba(0, 0, 0, 0.25), transparent70%);}
</style>
<img class="reflect-webkit" src="demo.jpg" alt="Product" />

说明：

• 语法：-webkit-box-reflect: <direction> <offset> <mask>
• linear-gradient 充当倒影的渐隐遮罩。
  优点：单行 + 自动跟随宽高。
  缺点：仅 WebKit 内核（Firefox 不支持）。
  适合：临时视觉增强、非核心信息。

---

方法二：伪元素复制 + 反转（推荐通用方案）

思路：利用容器包裹图片，伪元素 ::after 再绘制同一张图像，垂直翻转并添加渐变。

<div class="reflection-box"><img src="demo.jpg" alt="Phone" />
</div><style>.reflection-box {position: relative;width: 240px;}.reflection-box img {display: block;width: 100%;}.reflection-box::after {content: '';position: absolute;left: 0;right: 0;top: 100%;height: 100%;background: url('demo.jpg') center/cover no-repeat;transform: scaleY(-1);transform-origin: top;opacity: 0.6;/* 渐隐叠加 */mask-image: linear-gradient(to bottom,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0));-webkit-mask-image: linear-gradient(to bottom,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0));}
</style>

处理动态 src：

• 如果图片 URL 需动态绑定，可用行内 style="--src:url('xxx')" + background: var(--src) 或用 JS 设置伪元素。
• 亦可直接复制 <img> 节点再 scaleY(-1)，如下：

<div class="reflect-wrap"><img src="demo.jpg" alt="Phone" class="origin"