在网页设计中，图片倒影（reflection）是一种常见的视觉特效。它能为页面增添高级感，提升用户的视觉体验。本文将系统讲解两种方式来实现图片倒影效果：
- CSS box-reflect（WebKit 专属）
- 渐变 + 伪元素（兼容主流浏览器）
你可以结合文章结构，快速理解原理，并复制示例代码，立即应用到项目中。
CSS box-reflect 方法（仅限 WebKit 浏览器）
HTML代码：
<div class="image-reflect">
<img src="your-image.jpg" alt="示例图片">
</div>
CSS代码：
.image-reflect img {
display: block;
max-width: 100%;
-webkit-box-reflect: below 0px
linear-gradient(transparent, rgba(255, 255, 255, 0.4));
}
说明：
- -webkit-box-reflect: below 0px 表明在元素下方生成镜像，并与原图无间距。
- linear-gradient(transparent, rgba(255,255,255,0.4)) 用作遮罩，让倒影逐渐消失。
- 优点是代码极简，特效流畅。
- 缺点是仅在 WebKit 内核的浏览器（例如 Safari、Chrome、自带 WebKit 的 Android 浏览器）生效。
渐变 + 伪元素方案（跨浏览器兼容）
当需要兼容 Edge、Firefox 等浏览器时，可以使用伪元素与 transform: scaleY() 模仿倒影效果：
HTML代码：
<div class="reflect-container">
<img class="reflect-img" src="your-image.jpg" alt="示例图片">
</div>
CSS代码：
.reflect-container {
position: relative;
display: inline-block;
overflow: hidden;
}
.reflect-img {
display: block;
max-width: 100%;
}
.reflect-container::after {
content: "";
display: block;
width: 100%;
height: 80%; /* 倒影高度占原图的大约 80% */
position: absolute;
top: 100%;
left: 0;
background: url("your-image.jpg") no-repeat center top;
background-size: contain;
transform: scaleY(-1);
opacity: 0.5;
mask: linear-gradient(transparent 0%, black 50%, black 100%);
}
说明：
- 使用伪元素 ::after 在图像下方插入倒影。
- 倒影图像通过 background 引入主图，transform: scaleY(-1) 实现垂直翻转。
- mask: linear-gradient(...) 或 opacity 渐变让倒影柔和渐隐。
- 优点是兼容性广，可控制高度、透明度、遮罩渐变过渡。
增强版：CSS Variables 控制倒影参数
为了更灵活控制倒影高度、透明度与显示模式，可以引入 CSS 变量：
.reflect-container {
--reflect-height: 0.8; /* 倒影高度比例（0–1） */
--reflect-opacity: 0.4; /* 倒影最大透明度 */
--reflect-gradient-from: 0%; /* 遮罩渐隐起始点 */
--reflect-gradient-to: 60%; /* 渐隐结束点 */
position: relative;
display: inline-block;
}
.reflect-container .reflect-img {
display: block;
max-width: 100%;
}
.reflect-container::after {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: calc(var(--reflect-height) * 100%);
background: url("your-image.jpg") no-repeat center top;
background-size: contain;
transform: scaleY(-1);
opacity: var(--reflect-opacity);
mask: linear-gradient(
to bottom,
hsla(0, 0%, 0%, 0) var(--reflect-gradient-from),
hsla(0, 0%, 0%, 1) var(--reflect-gradient-to)
);
}
可以直接在 reflect-container 上覆盖变量，比如：
<div class="reflect-container" style="--reflect-height:0.6; --reflect-opacity:0.6;">
<img class="reflect-img" src="your-image.jpg" alt="示例">
</div>
优化与小贴士
- 响应式设计：确保 max-width: 100%，保证图片会根据父容器尺寸缩放。
- 性能考虑：如果图片较大，渐变 mask 可能略有性能损耗，可通过给 .reflect-container 添加 will-change: transform, opacity 优化。
- 交互效果：结合 :hover 状态，可为倒影添加微妙的缩放或透明度变化，增强交互感。
- 渐近支持：对于不支持 mask 属性的老浏览器，可退化为固定透明度的倒影；或使用半透明 PNG 图像作为 fallback。
完整示例代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>图片倒影示例</title>
<style>
.reflect {
position: relative;
display: inline-block;
overflow: hidden;
}
.reflect img {
display: block;
max-width: 100%;
}
.reflect::after {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 70%;
background: url("your-image.jpg") no-repeat center top;
background-size: contain;
transform: scaleY(-1);
opacity: 0.45;
mask: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 60%);
}
</style>
</head>
<body>
<div class="reflect">
<img src="your-image.jpg" alt="示例图片">
</div>
</body>
</html>
只需把 your-image.jpg 替换为你自己的图片 URL，即可看到倒影特效在所有主流浏览器中生效。
常见问题解答（FAQ）
Q：为什么 Chrome 看不到倒影？
A：需要加上 -webkit-box-reflect 的时候，Chrome 只在旧版支持。新的 Chrome 可更可靠使用伪元素方案。
Q：倒影图片模糊或偏移？
A：确认 .reflect 容器未有 padding/border 干扰，并确保 background-size: contain 或 cover 填满伪元素。
Q：倒影渐隐不流畅？
A：可尝试将 opacity、mask 参数调整渐变起止位置，或使用 linear-gradient 制作渐变遮罩。
结语
通过上述两种技术方案，你可以在页面中为图片添加镜面倒影效果：
- 使用 box-reflect 在 WebKit 浏览器中快速执行。
- 使用渐变 + 伪元素方案实现跨浏览器兼容。
它们均基于纯 HTML+CSS，无需额外 JavaScript，简洁又高效。你可以根据自己的项目需求自定义高度、透明度、渐隐范围，轻松打造符合视觉设计的镜像效果。