discuz门户网站模板最好网页游戏网站
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。
- 需要兼容性 + 易维护：用 2。
- 想要柔和渐隐过渡、无多余 DOM：用 3。
- 大型可视化 / 复杂滤镜链：用 4。
- 需要最终导出合成图 / 动态内容（如生成分享海报）：用 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"